谷歌浏览器对访问iframe等嵌套类跨站页面，默认禁止跨域访问

最新推荐文章于 2024-09-23 11:08:15 发布
最新推荐文章于 2024-09-23 11:08:15 发布
阅读量5.8k 收藏 5
点赞数 3
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/songyanfei1205/article/details/109117341
版权 
解决方式1：手动设置
chrome浏览器中搜索下面地址：
chrome://flags/#same-site-by-default-cookies
chrome://flags/#cookies-without-same-site-must-be-secure
这两项设置为Disabled，并重启浏览器

解决方式2：降低chrome浏览器版本

解决方式3：可使用国产浏览器 eg:QQ浏览器等

解决方式4：后台处理cookies，没试过

 

解决Iframe嵌入帆软BI系统后，Chrome升级后跨域出现登录界面，Cookie写入不成功。
帆软爱好者的专栏
09-30 4709
1 先看效果： cookie写入不成功，是因为google chrome的高版本为了防止CSRF攻击，默认将Cookie的SameSite设置为lax了，导致cookie跨域的时候就写不成功了。如果我们在嵌入页面的url上加上fine_auth_token参数值会怎样呢？看下图： 从上面看出当请求我们的BI页面时，Set-Cookie那里有个黄色的感叹号，表示cookie写入失败了，那一行小字说的是 SameSite=Lax了，所以跨域就写不了Cookie了。 为了解决这个问.
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
CRPER
03-13 6615
前言 去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照 最近回归大深圳….开始踏上漫漫的找工作之路; “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!” 题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React) emm…..这里不列举哪些公司了, 若是你完整的阅读一...
多层嵌套Iframe的自适应问题解决
bohemia的专栏
04-15 9404
/** * 多层嵌套Iframe的自适应问题解决 * * @author: Cheng * @Email : bohemia1985@163.com */一.为什么需要Iframe? 由于Iframe相当于独立的窗体，因此可以动态改变Iframe中的稳当的内容，而没有必要改变其他的元素。正是因为这个特点，所以Iframe在某方面就显示了它的优越性。 对于我的情况，主要是为了减少重复载入网页中已
如何取消谷歌浏览器对iframe类禁止跨域访问的办法【支持跨域网页访问】【ie浏览器默认是可以访问的】
热门推荐
weixin_43343144的博客
04-22 1万+
解决访问来自文章：https://docs.uibot.com.cn/guide/ 有时候，在一个网页当中，会通过引用的方式，或者iframe嵌套的方式，在其中内嵌一个其他域名下的网页。对于这种情况，我们称为“跨域网页”。在这种情况下，出于安全的考虑，不同的浏览器会有不同的策略。我们来实际体验一下： 打开Chrome浏览器，浏览http://mail.qq.com，即QQ邮箱页面，切换到...
前端笔记 ---- Chrome 浏览器不能跨域访问解决方案
止于至善
04-13 4163
谷歌浏览器跨域--disable-web-security无效解决办法
跨域问题解决：chrome浏览器禁用跨域功能
coinisi_li的博客
01-10 7449
一般我们的解决方法是设置代理，但有些情况比如外网地图不太好改允许跨域，此时可以chrome浏览器禁用跨域功能，这样就可以访问了。需求：在开发中，我们常常遇到：内网、外网不互通，异地等跨域问题。
谷歌浏览器跨域限制问题
cllove_的博客
09-23 606
步骤1： 谷歌浏览器 打开 chrome://flags/#block-insecure-private-network-requests。步骤2 ： 找到 Block insecure private network requests. 设置为Disabled。步骤3 ： 关闭谷歌浏览器重新打开网页 解决问题。
iframe跨域与session失效问题的解决办法
10-26
//解决IE7\8跨域访问问题 response.setHeader("P3P","CP=\"IDC DSP COR ADM DEV TAI PSA PSD IVAI IVI CONI HIS OUR DEL IND INT\""); %> ``` 这段代码的作用是在响应头中添加一个P3P声明，告诉IE浏览器这个网站...
解决第三方使用iframe内嵌页面时无法正常登录访问的问题
qq_28013889的博客
11-22 1万+
主要解决了谷歌浏览器高版本浏览器88或以上,引用iframe内嵌页面,因为浏览器的安全策略存在跨域，无法使用cookie获取到token信息，导致页面加载不出来的问题
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
lb_nizhanban的博客
06-13 2430
一阶段面试题： CSS浮动怎么理解的 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题 绝对定位相对定位怎么理解 absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素
83版本chrome禁止使用ifame标签嵌套下载
weixin_41201038的博客
06-08 1061
出于沙盒安全性考虑，83版本的chrome浏览器默认禁止了iframe嵌套页面，通过a和window.open,localtion.href点击下载， 为了解决这个问题，可以在父页面的iframe中sandbox属性中添加allow-downloads进行解决，请不要使用allow-downloads-without-user-activation （ 允许在没有征求用户同意的情况下下载文件） 以上转载https://blog.youkuaiyun.com/qq_39650209/article/details/106
iframe在其它浏览器可以显示，谷歌浏览器中无法显示问题
qq_34498048的博客
11-26 4055
转载https://blog.youkuaiyun.com/weixin_44202904/article/details/108848898 iframe在谷歌浏览器中无法显示问题 在页面中嵌入iframe，下面就是我所嵌入的iframe如果需要传入参数，可以使用模板字符串的形式。 src写的地址单独在谷歌浏览器是可以访问到html页面内容，但在项目中，嵌入的iframe就是不能显示，通过查找发现是由于谷歌浏览器升级后影响的。 使用下面的方法解决了我的问题Chrome 中打开 chrome://flags/#
谷歌浏览器跨域访问设置
QDY5945的博客
10-28 1553
文章转载自：https://www.cnblogs.com/laden666666/p/5544572.html 做前后分离的webapp开发的时候，出于一些原因往往需要将浏览器设置成支持跨域的模...
新版谷歌浏览器CROS跨域问题
超梦梦梦梦的博客
05-21 1430
搜索Block insecure private network requests，将其设置为Disabled。关闭谷歌浏览器重新打开网页。
谷歌浏览器关闭跨域限制，允许跨域请求，设置允许访问本地文件
qq_41777791的博客
12-15 1万+
谷歌浏览器关闭跨域限制，允许跨域请求，设置允许访问本地文件
谷歌浏览器iframe兼容问题_关于IFRAME下的事件运行（兼容谷歌浏览器） - 程序园...
weixin_35815640的博客
01-14 1189
貌似恒心不够，只写了三篇就断了好长时间，哎~~~自责。今天在写一个广告系统的前端。一个ＩＦRＡＭＥ下事件运行，另我抓狂。且看iframe下ＨＴＭＬ是这样写的：用ＪＱＵＥＲＹ克隆到parent窗口($(targetID, parentB).append($(x[rnd]).clone());)。swapadv事件写在父窗口。结果事件：swapadv在ＩＥ，ＦＦ，和ＯＰＥＲＡ下正常，唯独ＣＨＲＯＭＥ(...
【谷歌】浏览器【iframe】内嵌页面【cookie无法写入问题】
来自江西的大熊的博客
10-13 4229
一个大坑，谷歌浏览器升级到80版本之后，iframe读不到cookie Chrome 某个版本开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。并将未声明 SameSite 值的 Cookie 默认设置为SameSite=Lax Cookie。 （关于SameSite详情可参考阮一峰文章：http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html） google设置解决方法： 前往 chrom
谷歌浏览器最新版本对iframe等做了限制
better1166的博客
11-13 2702
https://www.cnblogs.com/liu01321/p/13521558.html
Mac 谷歌Chrome设置浏览器跨域
weixin_42896278的博客
03-05 4244
1.终端新建一个文件夹： mkdir MyChromeDevUserData 2.进入当前文件 cd MyChromeDevUserData 3.查看当前文件所在的系统目录： pwd 结果如图： 4.通过如下命令，在终端打开Google新窗口，该新窗口可以解决跨域问题 open -n /Applications/Google\ Chrome.app/ --args --disable-we...
iframe嵌套页面出现跨域
最新发布
05-13
<think>好的，我现在需要解决用户提出的关于iframe嵌套页面时出现的跨域问题。用户之前提到了通过iframe嵌入后页面无法加载、跨域通信以及cookie问题，所以我要结合之前的引用内容来整理解决方案。 首先，根据引用[1]和[2]，跨域问题通常是因为浏览器的同源策略限制了不同域名、端口或协议之间的交互。用户遇到的情况可能包括无法加载iframe内容或无法进行通信。我需要先明确常见的解决方案有哪些。 接下来，引用[3]提到了跨域通信的解决方案，比如使用postMessage或者中间代理页面（proxy）。同时，引用[4]和[5]讨论了cookie的SameSite属性和服务器设置的问题。这些方面都需要涵盖到。 我应该分步骤来解答，首先处理加载问题，然后是通信，最后是cookie问题。每个步骤需要给出具体的方法，比如设置CORS头、调整SameSite属性、使用postMessage等。同时，要确保用户理解每种方法的适用场景，比如主域相同时可以用document.domain，不同域时用postMessage或代理。 还要注意用户提到的Vue3项目中通过路由meta获取iframe的URL，可能需要检查URL是否正确，以及iframe的加载策略。比如，是否需要添加sandbox属性或调整X-Frame-Options。 需要检查是否有遗漏的解决方案，比如JSONP，但考虑到安全性，可能不推荐。此外，服务端代理也是一个选项，但可能需要后端配合。 最后，生成相关问题时要覆盖用户可能进一步询问的点，比如如何选择最佳方案、具体实现细节或常见错误排查。这样用户可以有后续的问题继续深入。</think>针对iframe嵌套页面时出现的跨域问题，以下是完整的解决方案（参考多个技术文档）： ### 一、跨域加载问题解决方案 1. **主域相同场景**： - 使用`document.domain`降域：当主页面与iframe页面主域相同时（如a.com与b.a.com） ```javascript // 主页面和iframe页面都设置 document.domain = 'a.com'; ``` 注意：仅适用于主域相同且需要双方页面主动设置[^2] 2. **跨域加载白名单**： - 服务端设置`X-Frame-Options`响应头： ```nginx add_header X-Frame-Options "ALLOW-FROM http://your-domain.com"; ``` - 或使用新标准`Content-Security-Policy`： ```nginx add_header Content-Security-Policy "frame-ancestors 'self' http://your-domain.com"; ``` ### 二、跨域通信解决方案 1. **postMessage API**（推荐方案）： ```javascript // 父页面发送消息 const iframe = document.getElementById('myIframe'); iframe.contentWindow.postMessage({ action: 'update' }, 'https://child-domain.com'); // 子页面接收 window.addEventListener('message', (event) => { if (event.origin !== 'https://parent-domain.com') return; console.log('收到消息:', event.data); }); ``` 2. **代理iframe方案**（适用于复杂场景）： - 在子页面创建与父页面同域的代理iframe ```javascript // 子页面创建代理iframe const proxyIframe = document.createElement('iframe'); proxyIframe.src = 'https://parent-domain.com/proxy.html'; document.body.appendChild(proxyIframe); // 通过代理页面中转消息[^3] ``` ### 三、Cookie跨域问题 1. **SameSite属性设置**： ```http Set-Cookie: sessionId=abc123; SameSite=None; Secure ``` 要求：必须HTTPS协议且`Secure`属性同时存在[^4] 2. **CORS配置**： ```nginx add_header 'Access-Control-Allow-Origin' 'https://parent-domain.com'; add_header 'Access-Control-Allow-Credentials' 'true'; ``` ### 四、Vue3项目最佳实践 ```vue <template> <iframe :src="frameSrc" @load="handleIframeLoad" ref="frameRef" class="frame-iframe" /> </template> <script setup> import { ref, unref } from 'vue'; import { useRoute } from 'vue-router'; const currentRoute = useRoute(); const frameSrc = ref(''); if (unref(currentRoute.meta)?.frameSrc) { frameSrc.value = unref(currentRoute.meta.frameSrc); } const handleIframeLoad = () => { // 跨域访问需确保已解决CORS问题 const iframeDoc = frameRef.value.contentWindow?.document; // 建议使用postMessage代替直接DOM操作 }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

残月飞鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值