chrome下调用iframe内容报Unsafe JavaScript attempt to access frame

最新推荐文章于 2024-11-01 18:29:29 发布
原创 最新推荐文章于 2024-11-01 18:29:29 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文介绍了解决Chrome浏览器中使用F12开发者工具时遇到的跨域访问错误的方法。当尝试从一个文件路径访问另一个不同路径的文件时，会遇到安全限制。文章指出将项目部署到服务器或使用HTTP服务器可以避免此类问题。

你用chrome的F12的页面工具，就可以看到他提示的错误：

Unsafe JavaScript attempt to access frame with URL file:///D:/temp/p.html from frame with URL file:///D:/temp/c.html. Domains, protocols and ports must match.

所以，当你放到服务器上面或者放到HTTP服务器上面就没有问题了。

Chrome：ERR_UNSAFE_PORT
test1280
07-21 924
ERR_UNSAFE_PORT chrome web 前端
CHROME扩展笔记之拒绝unsafe-eval求值
热门推荐
slongzhang的博客
03-18 1万+
开发插件选项页时由于引用了vue框架开发前端页面，导致拒绝eval求值问题 Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ blob: filesystem:”. 这是浏览器自
Unsafe JavaScript attempt to access frame with URL https://xxx with URL http://xxx.
weixin_30652879的博客
01-20 547
Unsafe JavaScript attempt to access frame with URL https://xxx with URL http://xxx.The frame requesting access has a protocol of 'http', the frame being accessed has a protocol of 'https'. Protocol...
Chrome下ifame父窗口调用子窗口的问题
weixin_30385925的博客
07-22 200
function changeMenu(menu_id){ 　　frames[0].changeMenu(menu_id); } https://blog.csdn.net/caohaicheng/article/details/21285695?utm_source=blogxgwz1 转载于:https://www.cnblogs.com/bjhblogs/p/11...
Chrome下ifame父窗口调用子窗口的问题示例探讨
09-03
主要介绍了Chrome下ifame父窗口调用子窗口的问题,需要的朋友可以参考下
使用unsafe时的坑
程序yuan同学
09-24 766
直接调用Unsafe中的getUnsafe()的方法获取Unsafe时候是不会报错的，但是运行的时候就会报错，如下： 进入getUnsafe()方法中： var0是当前调用当前方法的类的class，var0.getClassLoader()方法获取的是当前类的加载器AppClassLoader： 获取出加载器的时候进入方法isSystemDomainLoader(ClassLoader var0)进行判断，这个判断返回是false，则getsafe()方法中的判断则是true，则抛出异常： 所以只
Unsafe attempt to load URL file:///Users/lixin/Downloads/assets/text.vtt from frame with URL file://
lixin5456985的博客
11-01 727
​一个浏览器的错误信息。它说明了一个安全性问题，涉及到从本地文件系统加载资源时的限制。
MySQL：Unsafe statement written to the binary log using statement format since BINLOG_FORMAT = STATEM
01-19
150602 14:40:02 [Warning] Unsafe statement written to the binary log using statement format since BINLOG_FORMAT = STATEMENT. INSERT… SELECT… ON DUPLICATE KEY UPDATE is unsafe because the order in ...
unsafe value used in a resource URL context，angular框架下嵌入iframe报错问题解决
恍若c的博客
09-27 1476
直接为iframe中src赋网址浏览器会报错。由于 iframe 的 src 属性是资源 URL 安全上下文，不可信源可以在用户不知情的情况下执行某些不安全的操作。所有要使用angular提供的DomSanitizer服务。
谷歌浏览器的自带拦截功能
qq_54484537的博客
07-28 1327
问题：解决：
vue iframe 报错问题 浏览器监测到了iframe中存在不安全的链接正在尝试进行导航
奔跑的五花肉灬
01-11 4954
报错信息如下 Unsafe JavaScript attempt to initiate navigation for frame with URL ‘http://xxxx’ from frame with URL ‘http://yyyy’. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a
谷歌浏览器微信扫码登陆报错的问题
xiaoai5324的专栏
11-03 1万+
谷歌浏览器下面微信扫码登陆报错
微信二维码登录扫码报错
qq_62120825的博客
07-13 1894
当我进行扫描二维码登陆时，出现Unsafe attempt to initiate navigation for frame with origin http://localhost:3000 from frame with URL https://open.weixin.qq.com/connect/qrconnect?appid=wx67cfaf9e3ad31a0d\\\\&scope=snsapi_login\\\报错。原因是：浏览器监测到了。
引用iframe提示禁止访问后，再也打不开网站
bigcarp的专栏
12-25 1348
django项目，测试环境runserver时启用了81作为端口，A页面通过iframe引用B页面，访问A页面，提示禁止访问。然后打开任何页面都提示“可能暂时无法连接”禁止访问原因：settings.py中忘记配置 X_FRAME_OPTIONS = 'SAMEORIGIN'任何页面都提示“可能暂时无法连接”原因：有时，使用低于1024的端口可能导致浏览器认为端口不安全。的网页可能暂时无法连接，或者它已永久性地移动到了新网址。一个页面拒绝，就所有页面无法连接。
微信扫码登陆在chrome浏览器失败,浏览器禁止重定向
weixin_49628108的博客
12-12 2030
微信扫码登陆在chrome浏览器失败,浏览器禁止重定向
ionic iframe 报unsafe value used in a resource URL context
weixin_52137798的博客
11-30 727
import { DomSanitizer} from '@angular/platform-browser' 在使用iframe页面引入 将DomSanitizer注入 constructor(public sanitizer: DomSanitizer) { } contentDetails(catalogue){ this.recommend.contentDetails(catalogue).subscribe((res)=>{ console.log(res)
Unsafe JavaScript attempt to access frame with URL(window.open 子窗体得不到父窗体的句柄)
wlm的博客
12-14 1万+
<br />前几天在调试的时候 发现用window.open方法打开一个页面之后  在子窗体无法得到父窗体的句柄； 并且在chrome js即时窗口下输入地址报<br /> <br /> <br />Unsafe JavaScript attempt to access frame with URL<br /> <br /><br /><br /> <br />2Unsafe JavaScript attempt to access frame with URL http://live.beta.v.sin
iframe的安全问题
weixin_30847271的博客
02-06 1853
今天尝试在iframe中嵌入外部网站, 碰到了一些小问题. 如何让自己的网站不被其他网站的iframe引用? 我测试的时候发现我把iframe的src指定到github不起作用. 原来是它把X-Frame-Options设置为了DENY, 这样就禁用了别的网站的iframe引用, 避免点击劫持(clickjacking). X-Frame-Options有三个可能值: DENY, SAM...
Unsafe JavaScript attempt to initiate navigation for frame with URL 'https://rcgz.mohurd.gov.cn/' from frame with URL 'https://open.weixin.qq.com/connect/qrconnect?
最新发布
04-28
<think>嗯，用户遇到了跨域导航的安全错误，提示是“Unsafe JavaScript attempt to initiate navigation”，需要解决这个问题。首先，我要理解这个错误的原因。根据引用内容，这通常发生在不同源的iframe之间尝试导航顶层窗口，而浏览器出于安全考虑阻止了这种行为。因为跨域访问可能带来安全风险，比如点击劫持。 接下来，我需要回忆常见的跨域解决方案。比如CORS设置、使用postMessage通信、修改同源策略等。但用户的问题具体是导航顶层窗口，可能需要特定的处理方式。比如，用户是否拥有对父子页面的控制权？如果父页面和子页面不同源，直接通过子页面修改父页面的location.href会被浏览器阻止，除非有相应的权限。 查看引用中的例子，例如引用4提到，当父子页面域名不一致时，尝试在cookie中存储token会导致跨域错误，而localStorage则不会。这可能与不同存储方式的同源策略有关。但用户的问题是关于导航的，所以需要关注如何安全地允许跨域导航。 可能的解决方案包括： 1. 使用postMessage API进行跨域通信，让父页面监听消息并自行处理导航。这样避免子页面直接操作父页面的URL。 2. 在服务器端设置CORS头部，允许特定的源进行访问。但CORS主要控制资源访问，可能不直接解决导航问题。 3. 如果是iframe的情况，检查sandbox属性是否缺少必要的权限，如allow-top-navigation。 4. 确保导航操作是由用户触发的，比如点击事件，因为浏览器可能允许用户手势触发的导航。 5. 统一域名，将父子页面部署在同一域名下，避免跨域问题。 然后，我需要验证这些方法是否适用。比如，postMessage需要父子页面协同工作，子页面发送消息，父页面接收并执行导航。引用5中提到，如果iframe被沙箱化，可能需要设置allow-top-navigation标志。此外，引用2中的错误提到导航目标不是同源，也不是父级或opener，所以可能需要检查这些关系。 用户可能需要具体的代码示例，比如如何使用postMessage，或者如何设置HTTP头。另外，还需要考虑现代浏览器的安全策略，比如Chrome对跨域导航的限制较严格，需要明确的权限。 总结解决方案步骤： - 优先考虑同源部署。 - 使用postMessage进行安全通信。 - 检查并设置sandbox属性。 - 确保导航由用户触发。 - 必要时配置CORS和服务器代理。 需要将这些步骤详细解释，并提供代码示例，比如postMessage的使用方法，以及服务器端设置CORS的例子。同时，提醒用户注意浏览器安全策略的变化，比如Chrome的更新可能影响某些方法的有效性。</think>### 跨域导航安全错误解决方案 #### 问题核心分析 跨域导航错误**Unsafe JavaScript attempt to initiate navigation**是由于浏览器安全策略限制：当子框架（iframe）尝试修改父窗口的URL时，若两者**不同源**且**未通过用户主动触发**，浏览器会阻止此类潜在危险操作[^2][^4]。 --- #### 分步解决方案 ##### 1. 同源策略优先 **根本方案**：将父页面与子页面部署到**相同域名和端口**下。例如统一使用`http://localhost:8080`，可彻底规避跨域问题[^4]。 ##### 2. 跨域通信标准方法 通过`postMessage` API实现安全跨域通信： ```javascript // 子页面发送导航请求 window.parent.postMessage( { type: 'NAVIGATE', url: 'http://target.com' }, 'http://parent-domain.com' // 指定目标父域名 ); // 父页面监听并处理 window.addEventListener('message', (event) => { if (event.origin === 'http://child-domain.com' && event.data.type === 'NAVIGATE') { window.location.href = event.data.url; } }); ``` 此方式需父子页面**协同编码**，且需严格验证`event.origin`防止恶意攻击[^5]。 ##### 3. 沙箱权限配置 若使用`iframe`且需允许导航，需在沙箱属性中明确添加权限： ```html <iframe sandbox="allow-top-navigation-by-user-activation"></iframe> ``` 该配置允许用户主动操作（如点击）触发的顶级导航[^5]。 ##### 4. 用户手势触发 浏览器允许**用户主动行为**（点击、键盘输入）引发的跨域导航： ```javascript button.addEventListener('click', () => { window.top.location.href = 'http://target.com'; // 需绑定到按钮点击事件 }); ``` 直接执行`window.top.location`赋值会触发拦截，但通过事件监听可绕过限制[^4]。 ##### 5. 服务端代理转发 通过后端接口代理跨域请求（需服务端支持）： ```javascript // 前端请求代理接口 fetch('/api/proxy?url=http://target.com') // 服务端（Node.js示例） app.get('/api/proxy', (req, res) => { const targetUrl = req.query.url; axios.get(targetUrl).then(response => res.send(response.data)); }); ``` 此方案完全规避浏览器跨域限制，但增加服务器负载[^5]。 --- #### 错误场景对比 | 错误类型 | 触发条件 | 解决方案 | |---------|----------|----------| | 跨域导航顶级窗口 | 子iframe修改`window.top.location` | postMessage或用户手势触发 | | 沙箱权限不足 | iframe缺少`allow-top-navigation` | 补充沙箱属性 | | Cookie跨域写入 | 不同源页面操作Cookie | 设置`SameSite=None; Secure`[^4] | --- #### 扩展建议 - **浏览器控制台验证**：通过Chrome开发者工具的`Application > Frames`查看iframe层级关系 - **安全策略测试**：使用`document.hasStorageAccess()`检测跨域资源访问权限 - **协议一致性**：确保父页面与子页面同时使用HTTPS或HTTP协议 [^1]: 跨域导航安全策略文档 [^2]: JSP项目中跨域导航错误实例 [^4]: Cookie与LocalStorage跨域行为差异 [^5]: 沙箱配置与代理方案实践
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值