引用iframe提示禁止访问后，再也打不开网站

最新推荐文章于 2025-05-11 16:15:08 发布
原创 最新推荐文章于 2025-05-11 16:15:08 发布 · 1.3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#跨域

在Django项目中，如果测试环境runserver使用了低端口81并启用X_FRAME_OPTIONS未设置为SAMEORIGIN，会导致A页面通过iframe引用B页面时被禁止访问。同时，低端口可能触发浏览器的安全警告。解决方法是配置X_FRAME_OPTIONS并确保使用非敏感端口。

django项目，测试环境runserver时启用了81作为端口，A页面通过iframe引用B页面，访问A页面，提示禁止访问。然后打开任何页面都提示“可能暂时无法连接”

禁止访问原因：settings.py中忘记配置 X_FRAME_OPTIONS = 'SAMEORIGIN'

任何页面都提示“可能暂时无法连接”原因：有时，使用低于1024的端口可能导致浏览器认为端口不安全。

网址为 http://127.0.0.1:81/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。

ERR_UNSAFE_PORT

一个页面拒绝，就所有页面无法连接

bigcarp
关注
禁止网站被iframe引用
刘杨造梦的博客
05-31 983
解决方案一：js方法 这种方法不可靠，不推荐使用 <script type="text/javascript"> if(self != top) { top.location = self.location; } </script> 解决方案二：Meta标签方法 <meta http-equiv="X-FRAME-OPTIONS" content="DENY"> 以上两种为前端处理方法，不推荐使用。 解决方案三：PHP方法 <?php header
关于嵌套使用 iFrame 出现 Refused to display in aframe 拒绝连接访问 和 ‘X-Frame-Options‘ to ‘SAMEORIGIN‘ 的解决方案【已解决】
XH_jing的博客
05-26 3万+
目录问题描述原因分析问题解决总结 今天在迁移旧项目时，出现了如下错误提示： Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' 问题描述 当前项目是一个生产环境正常运行的项目，由于我们要迁移服务器并且部署 k8s，所以需要重新部署上线该项目。 使用 iframe 的场景就是在一个容器中展示另一个页面（也是我们自己的页面，只不过域名不同）才会抛出这个错误。 这个项目的在测试环境和生产环境都是可以正
谷歌浏览器部分iframe页面无法打开，跨域问题
xcagy-国际性的文档记录中心
03-30 6703
以后通过其他web应用使用iframe标签嵌入永洪链接的集成方式可以选择下面任意一种解决方案。 1.谷歌浏览器版本Chrome 79 及以下版本，嵌入URL无问题 2.同一个域名，嵌入无问题 3.Chrome或者edge浏览器打开新标签页，地址栏中分别输入： chrome://flags/#same-site-by-default-cookies回车后第一条设置为disabled chrome://flags/#cookies-without-same-site-must-be-secure回车后第一条设置
网址为 http://xxx:xxxx/的网页可能暂时无法连接，或者它已永久性地移动到了新网址
坏蛋阿土的博客
05-11 6356
这是由于浏览器默认的非安全端口所导致的，所谓非安全端口，就是浏览器出于安全问题，会禁止一些网络浏览向外的端口。6000-7000有很多都不行，所以尽量避免使用这个区间。nginx.conf 中配置user 为nginx。避免使用6000,6666这样的端口。还有在云服务器中，如果不行。
Django：六、使用iframe标签内嵌页面报错；拒绝了我们的连接请求；because it set ‘X-Frame-Options‘ to ‘deny‘.
浩栋的博客
09-21 9266
使用iframe标签内嵌页面报错；拒绝了我们的连接请求；because it set 'X-Frame-Options' to 'deny'.
iframe读取document出现拒绝访问
08-23
iframe.document出现拒绝访问。 threw an exception of type 'System.UnauthorizedAccessException' dynamic {System.UnauthorizedAccessException}
网页可能暂时无法连接，或者它已永久性地移动到了新网址，三种解决方法~
早知晓的博客
04-13 3万+
一、添加程序执行不限制时间（我的就是这种，执行时间太长导致）    方法前添加： ini_set("memory_limit", "-1"); set_time_limit(0); 二、重置你的TCP/IP和DNS配置（参考网站上别的小伙伴，我不属于这种，大家可以测一下）     1) 以管理员的方式运行命令行工具cmd.exe；  ...
“网页可能暂时无法连接，或者它已永久性地移动到了新网址，返回ERR_TUNNEL_CONNECTION_FAILED“，怎么办？用这个方法，亲试有效！！！
热门推荐
yunfeather的博客
01-20 6万+
"网页可能暂时无法连接，或者它已永久性地移动到了新网址，返回ERR_TUNNEL_CONNECTION_FAILED" 解决方式： 1.按下win+R，进入控制台 2.输入命令ipconfig /flushdns Microsoft Windows [版本 10.0.18363.1316] (c) 2019 Microsoft Corporation。保留所有权利。 C:\Users\Lenovo>ipconfig /flushdns Windows IP 配置 已成功刷新 DNS 解
项目中使用iframe嵌入外部网页时提示连接被拒绝
weixin_42864357的博客
06-25 1万+
X-Frame-Options： HTTP 响应头是用来给浏览器 指示允许一个页面 可否在iframe标签,embed标签 或者 标签中展现的标记，浏览器拒绝当前页面加载任何Frame页面。即该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。即表示该页面可以在相同域名页面的frame中展示。为允许frame加载的页面地址。即表示该页面可以在指定来源的frame中展示。X-Frame-Options可用于指示是否应该允许浏览器呈现在一个页面。
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
12-02
总的来说，解决Firefox中ExtJS关闭窗口后再打开后iframe中js函数访问不到的问题，关键在于正确地获取和使用iframe的`contentWindow`属性。同时，了解并遵循同源策略以及适时使用跨域通信技术，对于开发健壮的Web应用...
精选资源
PHP、Nginx、Apache中禁止网页被iframe引用的方法
01-20
DENY：浏览器拒绝当前页面加载任何Frame页面SAMEORIGIN：frame页面的地址只能为同源域名下的页面ALLOW-FROM：允许frame加载的页面地址 ... Nginx配置:复制代码 代码如下:add_header X-Frame-Options SAMEORIGIN ...
禁止iframe页面的所有js脚本如alert及弹出窗口等
10-25
3. 对于跨域的iframe，即iframe中的页面与父页面不属于同一个域，标准的JavaScript是无法直接访问iframe的内容的。因此，文中提供的JavaScript代码不适用于跨域场景。对于跨域的iframe内容，我们通常只能通过post...
暂时无法连接，或它已经永久性地移动到了新网址
qq_22841387的博客
09-28 1万+
DNS解析问题：域名未正确解析为对应的IP地址。网络缓存故障：过期的缓存信息导致访问异常。TCP/IP协议栈损坏：系统核心网络协议配置或状态异常。Winsock组件异常：网络应用接口受损或配置混乱。手动网络配置冲突：静态IP或DNS设置与实际网络不匹配。解决思路：通过重置DNS、清理网络缓存、重置TCP/IP和Winsock，并检查网络配置解决问题。
iframe嵌套页面 拒绝访问 X-Frame-Options配置
天生欧皇张狗蛋
04-19 5009
deny 表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。sameorigin 表示该页面可以在相同域名页面的 frame 中展示。allow-from uri 表示该页面可以在指定来源的 frame 中展示。
IE 浏览器可正常浏览网页，但谷歌提示网页可能暂时无法连接，或者它已永久性地移动到了新网址。错误代码：ERR_FAILED
zj202105的博客
06-03 3969
不同错误代码的解决办法。
iframe嵌套其他网站提示连接被拒绝
我的博客
06-08 1万+
最近开发项目中遇到了iframe嵌套页面，遇到了域名提示…拒绝了您的访问。报错：Refused to display ‘http://xxxxxxx/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.X-Frame-Options： HTTP 响应头是用来给浏览器 指示允许一个页面 可否在或者中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 点击劫持 攻击。
iframe中的a标签电话链接不能正常打开
weixin_30918633的博客
03-02 409
背景 经测试，android手机中没有这个问题， iphone手机中的Safari浏览器会出现这个问题。 例如： <a href = "tel://1-408-555-5555">1-408-555-5555</a> 解决办法： 给链接加上 target="_parent"， 如果iframe的嵌套比较深可以用 target="_top" <a...
Django加载不了iframe的问题
Pang_Yue__Fairy的博客
03-27 1678
问题描述： 如题，如下图 参考链接： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options http://caibaojian.com/x-frame-options.html https://blog.youkuaiyun.com/qq_38737845/article/details/98742907 分析： 可能是返回ifr...
iframe内嵌链接常见问题
一个希望世界和平的前端程序猿的博客
12-26 1万+
iframe内嵌链接常见问题
iframe 打开 前后端不分离的项目 谷歌浏览器打开空白
最新发布
11-27
<think> 我们正在处理一个关于在谷歌浏览器中使用iframe打开前后端不分离项目时出现页面空白的问题。根据提供的引用，我们可以从多个角度分析可能的原因和解决方案。 首先，引用[1]提到了浮动元素（float）的布局问题，在Firefox中需要正确闭合浮动元素以避免布局错乱。虽然这里提到的是Firefox，但类似布局问题也可能在其他浏览器中出现。如果iframe内部的页面存在未闭合的浮动元素，可能导致内容高度塌陷，从而显示空白。因此，检查并确保内部页面的浮动元素被正确清除是一个可能的解决方向。 其次，引用[2]和[4]涉及到浏览器的进程和线程模型，以及内存管理。引用[2]提到Chrome浏览器为了节省内存可能会限制进程数量，并在达到限制时将同一站点的多个标签页运行在一个进程中。同时，引用[4]详细介绍了浏览器标签页的线程模型，特别是GUI渲染线程和JS引擎线程的互斥性。如果iframe内部的页面包含大量复杂的JavaScript计算，可能会导致JS引擎线程长时间占用，从而阻塞GUI渲染线程，造成页面渲染延迟或空白。此外，如果系统资源不足，Chrome可能会将多个服务合并到一个进程中，这可能会影响页面加载性能。 引用[3]提到了Vue路由的hash模式，虽然不直接相关，但其中关于HTTP请求的说明（hash不会被包含在HTTP请求中）提醒我们考虑iframe加载的页面是否因为网络请求问题（如资源加载失败）而导致空白。 综合以上引用，我们可以从以下几个方面排查和解决： 1. **布局问题**：检查iframe内部页面的HTML和CSS，确保没有布局错误，特别是浮动元素的清除。可以在内部页面的适当位置添加清除浮动的元素或使用伪元素清除浮动。 2. **资源加载问题**：检查iframe加载的页面是否有资源（如CSS、JS、图片）加载失败，导致页面无法正常渲染。可以通过浏览器的开发者工具（Network面板）查看资源加载情况。 3. **JavaScript阻塞**：如果内部页面有大量或长时间运行的JavaScript代码，可能会导致渲染阻塞。优化JavaScript，将非必要的脚本延迟加载或异步加载，或者将计算任务拆分成小块以分时执行，避免长时间占用JS线程。 4. **同源策略限制**：如果iframe加载的页面与父页面不同源，可能会因为浏览器的同源策略而限制某些内容的加载或执行，导致空白。检查控制台是否有相关错误信息。如果可能，将父页面和iframe页面部署在同源下；或者通过设置跨域资源共享（CORS）来解决。 5. **浏览器进程/内存限制**：根据引用[2]，如果系统资源不足，Chrome可能会限制进程或合并进程，导致页面加载缓慢或失败。尝试关闭其他标签页释放内存，或者升级硬件配置。 6. **使用`srcdoc`属性或内联内容**：如果内部页面内容相对简单，可以考虑将HTML内容直接内联在iframe的`srcdoc`属性中，避免网络请求带来的问题。 7. **检查控制台错误**：打开浏览器的开发者工具，查看控制台是否有JavaScript错误或网络请求错误，这些错误可能导致页面渲染失败。 8. **设置iframe的尺寸**：确保iframe有足够的宽度和高度来显示内容。如果内部页面内容较多，可以动态调整iframe的高度。 9. **使用`onload`事件检测**：在iframe上添加`onload`事件，检查是否成功加载，并尝试在事件中获取内部文档的内容，以判断是否加载成功。 10. **服务器端渲染问题**：前后端不分离项目通常由服务器端渲染，检查服务器端是否正确处理了请求，返回了预期的HTML内容。 由于用户的问题描述中提到“前后端不分离项目”，因此我们还需要关注服务器端是否有可能导致页面空白的问题，例如服务器端渲染时数据获取失败，或者模板渲染错误等。 下面是具体的解决步骤： **步骤1：检查浏览器控制台** 打开浏览器的开发者工具（F12），切换到Console（控制台）标签，查看是否有JavaScript错误或网络请求错误。如果有，根据错误信息进行修复。 **步骤2：检查网络请求** 在开发者工具的Network（网络）标签中，查看iframe加载的页面及其所有资源（CSS、JS、图片等）是否都成功加载。如果有资源加载失败，检查资源路径是否正确，服务器是否可访问。 **步骤3：检查布局和样式** 如果控制台没有错误且资源加载正常，则可能是布局问题。使用开发者工具的Elements（元素）面板检查iframe内部页面的DOM结构和CSS样式，特别是查看是否有元素因为浮动或定位问题导致内容不可见。 **步骤4：优化JavaScript** 如果内部页面有大量JavaScript计算，尝试将部分代码延迟执行（使用`setTimeout`或`requestIdleCallback`）或使用Web Worker在后台线程执行，避免阻塞主线程。 **步骤5：处理跨域问题** 如果存在跨域问题，可以在服务器端设置CORS响应头，例如： ``` Access-Control-Allow-Origin: * ``` 或者指定具体的允许访问的域名。 **步骤6：确保服务器端正确渲染** 检查服务器端日志，确认服务器在处理请求时没有抛出异常，并且返回了正确的HTML内容。 **步骤7：调整iframe属性** 可以尝试给iframe添加一些属性，如`scrolling="auto"`，并显式设置宽度和高度。例如： ```html <iframe src="your-page.html" width="100%" height="600px" scrolling="auto"></iframe> ``` **步骤8：使用内联样式确保iframe可见** 确保iframe本身在父页面中是可见的，没有因为父页面的CSS样式（如`display:none`或`visibility:hidden`）而被隐藏。 如果以上步骤仍然无法解决问题，可能需要更具体地分析内部页面的代码和服务器端行为。 §§相关问题§§ 1. 如何解决iframe跨域问题？ 2. 如何优化长时间运行的JavaScript以避免阻塞页面渲染？ 3. 如何清除浮动元素？ 4. 如何动态调整iframe的高度以适应其内容？ </think> 在使用 iframe 加载前后端不分离项目时出现页面空白问题，通常由以下原因及解决方案造成： ### 原因分析及解决方案 1. **同源策略限制**（最常见） - **原因**：如果 iframe 加载的页面与父页面不同源（协议/域名/端口任一不同），浏览器会阻止内容加载。根据引用[4]，浏览器安全机制会限制跨域资源访问。 - **解决**： - 将父页面和 iframe 内容部署到同源下 - 在服务器端设置 CORS 头部：`Access-Control-Allow-Origin: *` - 在 iframe 添加 `sandbox="allow-same-origin"` 属性 2. **资源加载阻塞** - **原因**：前后端不分离项目常包含同步加载的 JS/CSS 文件。根据引用[4]，JS 引擎线程会阻塞 GUI 渲染线程。 - **解决**： ```html <!-- 将同步脚本改为异步加载 --> <script defer src="main.js"></script> <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"> ``` 3. **浮动布局问题** - **原因**：根据引用[1]，未闭合的浮动元素会导致布局塌陷。常见于传统项目中的 CSS 写法。 - **解决**： ```css /* 在 iframe 内容页添加清除浮动 */ .clearfix::after { content: ""; display: table; clear: both; } ``` 4. **浏览器进程限制** - **原因**：根据引用[2]，Chrome 会限制进程数量，可能导致 iframe 资源分配不足。 - **解决**： - 关闭其他浏览器标签释放内存 - 增加 Chrome 进程限制：启动参数添加 `--process-per-site` 5. **渲染阻塞** - **原因**：根据引用[4]，JS 引擎线程与 GUI 渲染线程互斥。 - **解决**： ```javascript // 将初始化逻辑延迟执行 window.addEventListener('DOMContentLoaded', () => { setTimeout(initApp, 100); }); ``` ### 完整检查流程 1. 打开 Chrome 开发者工具（F12） 2. 切换到 Network 标签，检查 iframe 请求是否返回 200 3. 查看 Console 标签的跨域错误提示 4. 检查 Application > Frames 中的 iframe 是否加载完成 5. 在 Elements 面板审查 iframe 内容是否实际存在但被隐藏 ### 临时解决方案 ```html <!-- 添加加载重试机制 --> <iframe id="myFrame" onerror="retryLoad()"></iframe> <script> function retryLoad() { const frame = document.getElementById('myFrame'); frame.src = frame.src + '?t=' + Date.now(); } </script> ``` > **注意**：对于传统项目，建议在 iframe 内容页添加基础样式兜底： > ```css > body:empty::before { > content: "加载中..."; > display: block; > padding: 20px; > } > ``` ### 引用说明 - 关于浏览器进程限制的影响 [^2] - JS 线程与渲染线程互斥机制 [^4] - 浮动布局问题的解决方案 [^1]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值