首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Chrome中单击后退按钮会影响跨域iframe中的Vue应用程序,而不是原始页面

。这是由于浏览器的同源策略所导致的。

同源策略是一种安全机制,它限制了一个页面中的脚本只能访问同源的资源。同源是指协议、域名和端口号都相同。当一个页面中包含了一个跨域的iframe,并且该iframe中的Vue应用程序与原始页面不属于同源关系时,浏览器会受到同源策略的限制。

当在Chrome中单击后退按钮时,浏览器会尝试还原前一个页面的状态,包括iframe中的内容。然而,由于跨域限制,浏览器无法获取到跨域iframe中的Vue应用程序的状态,导致该应用程序无法正确还原。

为了解决这个问题,可以考虑以下几种方法:

  1. 使用postMessage进行跨域通信:通过在原始页面和跨域iframe之间使用postMessage方法进行消息传递,可以实现跨域通信,从而在还原页面状态时将必要的信息传递给Vue应用程序。
  2. 使用代理页面:可以在原始页面和跨域iframe之间添加一个代理页面,该代理页面与Vue应用程序属于同源关系。通过代理页面来加载和管理Vue应用程序,可以避免跨域限制。
  3. 考虑使用同源的解决方案:如果可能的话,可以将原始页面和Vue应用程序放在同一个域名下,这样就不会受到跨域限制的影响。

总结起来,Chrome中单击后退按钮会影响跨域iframe中的Vue应用程序,而不是原始页面,是由于浏览器的同源策略所导致的。为了解决这个问题,可以使用postMessage进行跨域通信,使用代理页面或考虑使用同源的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

多种方式Vue嵌入Grafana面板

昨天想了下开发监控模块思路,有了大致实现方法,今天都尝试了下,遇到一些问题,记录下: 1、使用iframe引入页面,这是目前最简单高效方式,但并不是最优方式,原因如下: 安全性:iframe可以被恶意利用...性能影响iframe增加页面加载时间和资源消耗。特别是移动端,明显感觉到卡顿。 阻塞主线程:iframeJS代码阻塞主页面的事件循环,影响交互响应。...隔离作用iframe创造了独立作用,无法直接访问其内容。需要通过postMessage通信,较为复杂。 控制权限:iframe不受主页面控制,无法直接监听其事件或操控内容。...权限由iframe页控制。 我引入时候,几种方式如下: 1、一种是这样 ,直接创建一个页面iframe是浏览器原生支持HTML标签,无需依赖任何外部库。...可以Vue3创建、修改和删除Grafana仪表板 2. 可以通过Vue3直接读取和更新Grafana仪表板数据 3. 有更丰富可视化组件可以使用 4.

1.3K30

JavaScript(九)

innerWidth 和 innerHeight 则表示该容器页面视图区大小。...提示框除了显示 OK 和 Cancel 按钮之外,还会显示一个文本输入,以供用户在其中输入内容。...如果用户单击了 OK 按钮,则 prompt() 返回文本输入值,如果用户单击了 Cancel 或没有单击 OK 而是通过其他方式关闭了对话框,则该方法返回 null 这些系统对话框很适合向用户显示消息并请用户作出决定...当通过上述任何一种方式修改 URL 之后,浏览器历史记录中就会生成一条新记录,因此用户通过单击后退按钮都会导航到前一个页面。 要禁用这种行为,可以使用 replace() 方法。...负数表示向后跳转(类似于单击浏览器后退按钮),正数表示向前跳转(类似于单击浏览器”前进”按钮)。

1.1K40

Ajax与jQuery异步加载数据

动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录静态页面。...一个被完整读入页面与一个已经被动态修改过页面之间可能差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们前一次操作,但是Ajax应用程序,却无法这样做。...不过开发者已想出了种种办法来解决这个问题,HTML5之前方法大多是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏IFRAME来重现页面变更。...(例如,当用户Google Maps单击后退时,它在一个隐藏IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时状态)。...相关文章 知识图谱可视化Demo Vue快速开发注记 基于RESTfulFastAPI服务模板 学科领域本体关系数据与可视化 FastAPI搭建文件上传服务器 HTML跳转到页面某一位置 JavaScript

10.9K20

墨瞳漫画h5一期 vuejs总结

构建单页面大型应用的话,肯定要开启组件缓存,因为一般会要求后退时候不要重新加载页面,而且要记住原始滚动位置。...,比如 漫画详情页面是一个路由带参数组件,当参数变化时,router重用这个组件,不是重新请求数据,这显然是不符合要求,所以正确姿势是: 首先,用一个字段保存这个路由参数, 用router钩子函数...第二个坑就是关于缓存页面浏览位置纪录,router是通过html5 historypushState来纪录当前滚动位置,切换路由时候,把当前位置push进去,用户后退时,触发onpopstate...(data) => {this.busy = false;}) } 但是这个组件路由切换时候会出问题,routerView被移除时,组件触发加载(大概是因为页面高度突然塌陷),而且一直加载到我们自己设置停止条件...vue-resource 时,先发送一个空options请求来查看接口是不是支持,再发送一次真实请求。

1.1K10

关于HTML面试题汇总之H5

pad上标题显示较大字体 4、对搜索引擎和爬虫友好 三、iframe优缺点 1、优点   1.1、不刷新情况下重新载入页面;   1.2、方便用于后台管理,或不用于对搜索引擎友好系统...frameset)    2.4、浏览器后退按钮无效(他只能后退当前获得光标的iframe)    2.5、多数pad、手机不支持框架    2.6、增加http请求    2.7、iframe阻塞页面的加载...,包含iframe页面的window.onload事件,只有等待iframe加载完成后才能触发,但可以通过js来动态设置iframesrc属性可以避免这种情况(chrome和safari支持) 3、...iframe和frame区别   3.1、iframe和frame实现功能相同;   3.2、iframe可以单独使用,frame必须和frameset一起使用   3.5、html5iframe...click事件阻止冒泡,所以单击时只输出 ‘input……………….’。

1.8K50

窥探现代浏览器架构(一)

进程可以看成正在被执行应用程序(executing program)。线程是跑进程里面的,一个进程里面可能有一个或者多个线程,这些线程可以执行任何一部分应用程序代码。...进程使用系统分配内存空间去存储应用数据 有时候为了满足功能需要,创建进程会叫系统创建另外一些进程去处理其它任务,不过新建进程拥有全新独立内存空间不是和原来进程共用内存空间。...以下是各个进程具体负责工作内容: 进程 负责工作 Browser 负责浏览器Chrome”部分, 包括导航栏,书签, 前进和后退按钮。...因此Chrome 67版本之后,桌面版Chrome默认开启网站隔离功能,这样每一个站点iframe都会拥有一个独立渲染进程。...网站隔离功能iframe拥有独立进程 网站隔离技术汇聚了我们工程师好几年研发努力,它其实远远没有想象那样只是为不同站点iframe分配一个独立渲染进程那么简单,因为它从根本上改变了各个

44630

实用VUE系列——每天在用Vue-SFC-Playground你真的了解吗?

之所以产生这种滑稽现象是因为,制订标准的人,和开发浏览器的人不是一波人 我们知道ES6 是由ECMA组织制定标准,浏览器一般是由谷歌主导开发 自古以来,上有政策,下有对策,制定是制定,执行是执行...其实我就是就是一个不受外部影响干净执行环境 沙箱这个名字,虽然听起来比较玄乎 但其实,我们日常开发,无不在使用沙箱 比如: IIFE JavaScript 目前有三种作用: 全局作用、函数作用...但他最大问题也在于他隔离性无法被突破,导致应用间上下文无法被共享,随之带来开发体验、产品体验问题。 url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。...iframe想要实现通信,有两种情况 1、同源 2、 同源 同源策略限制 窗口(window) 和 frame 之间通信,因此首先要知道同源策略。...来获取 document 状态下,我们就要用到 postMessage,无论它们来自什么源 想要发送消息窗口需要调用接收窗口 postMessage 方法。

52110

浏览器常见面试题速查

用户界面:包括地址栏、前进/后退按钮、书签菜单等。...(叶子节点);从左到右匹配规则性能都浪费了失败查找上面。...重排和重绘代价是高昂,它会破坏用户体验,并且让 UI 展示非常迟缓,相比之下重排性能影响更大,两者无法避免情况下,一般选择代价更小重绘。...server 之间双向通信就与 HTTP 无关了,因此可以 window.name + iframe: window.name 属性值不同页面(甚至不同域名)加载后依旧存在,并且可以支持非常长...三个页面,不同之间利用 iframe location.hash 传值,相同之间直接 js 访问来通信 document.domain + iframe: 该方法只能用于二级域名相同情况下,

42930

10 种解决方案(附终极方案)

又来了,又说到了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写,会想着你去了解底层啊,不是很简单吗。..., chrome 是能看到返回值,但是只要不满足以上其一,浏览器会报错,获取不到返回值。...实现原理 原理就是通过 url 带 hash ,通过一个非中间页面来传递数据。...三、为什么需要最一开始,我们知道了,只存在于浏览器端。浏览器为 web 提供访问入口。我们可以浏览器内打开很多页面。正是这样开放形态,所以我们需要对他有所限制。...有一个不成熟想法,可以搞这么一个浏览器,只让访问内网/本地网络,专门给开发者用来调试页面用,对于静态资源可以配置白名单,这样是不是就没有问题了,23333。

2.7K12

10 种解决方案(附终极方案)

chrome 是能看到返回值,但是只要不满足以上其一,浏览器会报错,获取不到返回值。...image-20200412195829232 小结 1、 新版 chrome ,如果你发送了复杂请求,你却看不到 options 请求。...介绍与使用 利用 charles 进行,本质就是请求拦截与代理。 tools/map remote 设置代理 ? image-20200412232733437 ?...最一开始,我们知道了,只存在于浏览器端。浏览器为 web 提供访问入口。我们可以浏览器内打开很多页面。正是这样开放形态,所以我们需要对他有所限制。...「有一个不成熟想法,可以搞这么一个浏览器,只让访问内网/本地网络,专门给开发者用来调试页面用,对于静态资源可以配置白名单,这样是不是就没有问题了,23333。

3K30

Kali Linux Web渗透测试手册(第二版) - 4.8- 执行站点请求伪造攻击

虽然这证明了这一点,但外部站点(或本例本地HTML页面)可以应用程序上执行密码更改请求。用户仍然不太可能点击“提交”按钮。 我们可以自动执行该操作并隐藏输入字段,以便隐藏恶意内容。...这个截图显示了使用浏览器开发人员工具检查页面外观: ? 请注意,iframe对象页面只是一个黑线,Inspector,我们可以看到它包含BodgeIt用户配置文件页面。 11....Web应用程序渗透测试,我们使用第一个代码,带有两个文本字段和提交按钮代码可能足以证明存在安全漏洞。...当发生这种情况时,我们尝试发出站点/请求,浏览器将执行所谓预检检查,这意味着预期请求之前,浏览器将发送OPTIONS请求以验证哪些方法和内容类型服务器允许从源(应用程序所属以外)请求)....预检检查可以中断CSRF攻击,因为如果服务器不允许源请求,浏览器将不会发送恶意请求。 但是,此保护仅在通过脚本进行请求时才有效,不是通过表单进行时。

2.1K20

再谈location与history之跳转转态监控—router两种实现模式

浏览器历史记录中就会生成一条新记录,用户通过单击"后退"按钮都会导航到前一个页面。...就相当于一个链接,跳转到指定url,当前页面会转为新页面内容,可以点击后退返回上一个页面。...如果有 POST 数据提交,则会重新提交数据;如果想要刷新当前页面,又避免 POST 数据提交,可以使用:window.location.replace( location.href );不刷新当前页面更新内容前端改变浏览器地址不刷新页面...title:目前来看没啥用(未来可能会用到),一般为空或null,URL:即要更改页面的URL,且必须同源,不能;类似location =URL(但仅是更新浏览器地址栏地址,不会加重URL)history.replaceState...,但事件内可以获取到state状态值各浏览器对popstate事件是否触发有不同表现,Chrome和Safari触发popstate事件,FireFox不会。

2.3K10

基于 iframe 全新微前端方案

作者:damyxu,腾讯 PCG 前端开发工程师 iframe是一个天然微前端方案,但受限于严格限制而无法很好应用,本文介绍一种基于 iframe 全新微前端方案,继承iframe优点,...可以归纳如下: 一个web应用可以独立运行另一个web应用 这个概念已经和微前端不谋合,相对于目前配置复杂、高适配成本微前端方案来说,采用iframe方案具有一些显著优点: 非常简单,使用没有任何心智负担...来看无界如何一步一步解决iframe问题,假设我们有 A 应用,想要加载 B 应用: 应用 A 构造一个shadow和iframe,然后将应用 B html写入shadow,js运行在iframe...,浏览器前进后退可以天然作用到iframe上,此时监听iframe路由变化并同步到主应用,如果刷新浏览器,就可以从 url 读回保存路由 ✅ 通信非常困难问题,iframe和主应用是同,天然共享内存通信...对于主应用无需做任何改造 对于子应用: 前提,必须开放配置,因为子应用是主应用内请求和运行 对webpack应用,修改动态加载路径 如果子应用保活模式则无需进一步修改,非保活则需要将实例化挂载到无界生命周期内

6.9K90

Chrome 92 破坏性功能,我这弹窗有何用?

首先我们先来看看 Chrome 对这个破坏性动机官方解释: 如果不明白可以看我这篇文章:10 种解决方案(附终极方案) " 现阶段来源于 iframe(不管是否 JS 弹窗(...然而,当这些 alerts 来自 iframe 时,UI 更加混乱,因为 Chrome 试图解释对话框不是来自浏览器本身或顶级页面。...一方面由于 iframe JS 对话框使用率较低,从事实来看,站点主要功能通常不需要使用 JS 对话框时,另一方面难以可靠地解释对话框来源,因此我们建议删除 iframe JS 对话框...因此当出现iframe 弹窗(alert/confirm/prompt)将会被阻止,否则这些子 iframes 可能假装父页面的对话框。 " 为了实际演示,我们先来看看旧版浏览器效果。...例如请求问题,几乎曾让每个前端工程师都抓狂过,也许还会抱怨为什么还有这种东西来影响我们开发

66730

Cypress web自动化20-问题-a标签超链接

cypress上对web安全性上考虑更严格,对于链接认为是不安全,相关资料查阅https://docs.cypress.io/guides/guides/web-security.html...a标签 当访问一个web页面,点如下按钮时 ?...你可能觉得这是 cypress 缺陷,很多人觉得之前用 selenium 都可以,然而,事实是,Cypress在你应用程序暴露了一个安全漏洞,你希望它在Cypress失败。...原始HTTP请求仍然发出一次,暴露了不安全会话信息。 解决办法:只需更新HTML或JavaScript代码,不导航到不安全HTTP页面,而是只使用HTTPS。...设置chromeWebSecurity为false允许你做以下事情: 显示不安全内容 导航到任何超没有错误 访问嵌入到应用程序iframe

3.1K20

深入理解浏览器原理

不同进程作用 浏览器:控制应用程序chrome部分,包括地址栏,书签,后退和前进按钮。...它被分成不同进程,因为GPU处理来自多个应用程序请求并将它们绘制同表面。...因此为每个网站iframe运行单独渲染器进程。 站点隔离难点:从根本上改变iframe通信方式,包括ctrl+F查找、打开devtools等需不同渲染器进程访问。【重大版本】。...4.3 安全检查 恶意名单检查:如果和响应数据恶意站点名单,则网络线程发出和显示警告页面读取检查:CrossOriginReadBlock检查,敏感站点数据不进入渲染器进程 5....1、UI更新:地址栏更新、安全指示器、站点设置UI反映新页面站点信息 2、选项卡会话历史记录更新(前进/后退),为便于关闭浏览器后恢复,历史记录到磁盘 7.

4.5K31

前端资源共享方案对比-笔记:iframeJS-SDK微前端

隔离性好:主页面和嵌入页面相互隔离,不存在脚本冲突,样式影响问题 iframe缺点 iframe标签性能消耗较大,过多iframe标签造成页面卡顿 子应用切换,每次都要重新加载资源,速度慢 iframe...浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用 JS-SDK SDK(Software Development Kit) 即软件开发工具包, 一般是一些软件工程师为特定软件包、软件框架...可以实现模块化编程,大大减少了重复工作量; 可以提高程序可维护性和可扩展性 sdk方式缺点 体积较大:SDK 通常会包含大量代码,可能影响应用程序下载速度和安装体验。...优先使用本机浏览器功能不是自定义 API 使用浏览器事件进行通信,不是构建全局 PubSub 系统。如果你真的需要构建一个团队 API,尽量让它尽可能简单。...不同框架之上设计通讯、加载机制,以一个页面内加载对应应用。 微应用。通过软件工程方式,部署构建环境,组合多个独立应用成一个单体应用。 微件化。

1.6K10

web messaging与Woker分类:漫谈postMessage线程页面通信

使用postMessage将数据发送到其他窗口时,始终指定精确目标origin,不是*。 无法检查origin和source属性导致站点脚本攻击。...不同于普通Worker,Service Worker 是一个浏览器进程不是浏览器内核下线程(Service Worker是走另外线程,可以理解为浏览器背后默默运行一个线程,或者说是独立于当前页面的一段运行在浏览器后台进程里脚本...这就是所谓subworker(还是Woker),它们必须托管同源页面内。而且,subworker 解析 URI 时会相对于父 worker 地址不是自身页面的地址。...需要注意是,这种通信是拷贝关系,即是传值不是传址,Worker 对通信内容修改,不会影响到主线程。...manifest 缓存 已经被废弃,因为他设计有些不合理地方,他缓存静态文件同时,也默认缓存html文件。这导致页面的更新只能通过manifest文件版本号来决定。

2K30

前端路由三种模式原理

并不刷新页面。 #后跟就是页面Hash,同样hash改变也推进浏览器历史记录。 支持后退前进。...可以改变网址(存在限制)不刷新页面,这个强大特性后来用到了单页面应用如:vue-router,react-router-dom。...url:要跳转到URL地址,不能。 将当前URL和history.state加入到history,并用新state和URL替换当前。不会造成页面刷新。...window.onpopstate history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷时候(由于使用pushState修改了history)触发popstate...相对于hash路由来讲前端只能控制#后url地址,history api允许同源策略下进行任意自由路由设置不刷新页面

1K30

你需要了解几种微前端解决方案

以下是我对该文中总结部分总结: 不是单页应用,导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 弹框类功能无法应用到整个大应用,只能在对应窗口内展示。...由于可能应用间不是相同内,主应用 cookie 要透传到根域名都不同子应用才能实现免登录效果。...这对于自定义标记结构来说通常不是那么容易 — 想想复杂HTML(以及相关样式和脚本),有时您不得不写代码来呈现自定义UI控件,并且如果您不小心的话,多次使用它们会使您页面变得一团糟。...技术栈组件式调用,提供了主应用框架可以调用其他框架组件能力(目前已支持互相调用框架及使用方式请参阅官方文档)。...按需加载,开发者可以选择只加载微应用需要部分,不是强制只能将整个应用全部加载。 应用间通信,每一个应用都可以进行状态共享,就像在使用npm模块进行开发一样便捷。

2.5K30
领券