iframe 内容无法出现在 Firefox 中

Posted 2023-03-05

【中文标题】iframe 内容无法出现在 Firefox 中

【英文标题】：iframe contents cant appear in Firefox

【发布时间】：2013-08-24 18:42:07

【问题描述】：

下面是我的代码：

<div style="border: solid 1px #000000; margin: 5px;">
  <iframe src="http://www.w3schools.com"   scrolling="yes"><p>Your browser does not support iframe.</p></iframe>     
</div>   

iframe 的内容在 chrome 中运行良好，但在 Firefox 中则不行。我已经禁用了附加组件，但我的 iframe 仍然是空的。谁能帮帮我吗？

【问题讨论】：

在 FF 23 上适合我吗？ jsfiddle.net/ZWMbG

我也是。尝试检查 adblock，noscript，你的杀毒软件关闭（然后重新启动浏览器。你也可以在打开页面时检查 web 控制台上发生的情况。

我使用的是 Firefox 23.0.1 但它不工作..只是显示白色的空框..

【参考方案1】：

我不知道它是否相关，但是当我尝试通过 c# 请求 w3schools 时，它会响应 503 禁止错误。所以他们可能会使用一些东西来阻止出现在 iframe 等上。Facebook 有类似的限制，除非你登录，否则你不能显示他们的likebox iframe。

【讨论】：

昨天我第一次这样做时它在 FF 中工作，但是当我点击我的 URL 时，它开始在我的所有 iframe 中显示任何内容。不仅适用于 w3schools..

如果出现503错误，为什么Firefox不显示呢？这将是浏览器中的错误。我注意到加载 google.com 的 https 站点会导致一个空框架。谷歌似乎检测到 iframe 并发送一个空页面。虽然我可以毫无问题地加载我银行的 https 网站！

【参考方案2】：

如果您尝试在 SSL 加密网站 (https://) 上添加此 iframe，自 Firefox 23 起它将不再起作用，因为 Mozilla 已决定阻止加密网站上的所有未加密内容（例如 http -iframes 在 https 网站上）。 您可以通过在地址栏中键入about:config 并将security.mixed_content.block_active_content 设置为false，在您自己的Firefox 安装中更改此行为。 但这对您网站上的所有其他 FF23 访问者没有帮助。

【讨论】：

我们不能通过编写一些javascript代码来做到这一点吗？

是不是chromium-browser也有同样的情况？

我们可以在 HTTPS 网站上使用 HTTPS iframe 吗？

【参考方案3】：

我有同样的问题。对我来说，原因是网址末尾的斜杠。

不起作用：

<iframe src="http://example.com/some/sub/folder/"></iframe>

作品：

<iframe src="http://example.com/some/sub/folder"></iframe>

【讨论】：

不是我的情况...

【参考方案4】：

为什么还没有人提到 CORS？

来自mdn

跨域资源共享 (CORS) 是一种使用 额外的 HTTP 标头让用户代理获得访问权限 从不同来源（域）上的服务器中选择的资源 当前使用的站点。用户代理创建跨域 HTTP 请求从不同的域、协议、 或端口，而不是当前文档的来源。

跨域请求示例：提供的 html 页面 http://domain-a.com 发出 src 请求 http://domain-b.com/image.jpg。当今网络上的许多页面都加载 CSS 样式表、图像和脚本等资源来自不同的 域，例如内容交付网络 (CDN)。

出于安全原因，浏览器会限制跨域 HTTP 请求 从脚本中启动。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着网络 使用这些 API 的应用程序只能从 加载应用程序的域相同，除非 CORS 标头是 用过。

这意味着您尝试从 iframe 进入的网站被设置为拒绝来自您的网站或其他人（如果不是全部）的请求。

【讨论】：

例如。使用您的 html 给出的 url，我在 Mozilla 开发人员版上得到以下内容“X-Frame-Options 拒绝加载：w3schools.com 不允许跨域框架。”

试试这个网址example.com。如果加载了这个，那么您的问题是由于 CORS（如果您的浏览器没有附加组件）。

如果我确实需要将某个网站放入 iframe 中，我该如何解决？

如果您尝试通过 iframe 访问的网站不归您所有，那么您应该要求所有者将您的域添加到他们的 CORS 白名单中。

关注thepolyglotdeveloper.com/2014/08/…

【参考方案5】：

截至 2018 年 5 月，由于 X-Frame-Options 标头设置为“sameorigin”，浏览器拒绝 iframe 引导。

使用 Firefox 测试页面并获得空白 iframe。 控制台是这样说的：

Load denied by X-Frame-Options: https://www.w3schools.com/ does not permit cross-origin framing.

为什么？我会给 Chrome 控制台一个机会，它是这样说的：

Refused to display 'https://www.w3schools.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

基本上，X-Frame-Options 标头（不要将其与 CORS 混淆）设置为“sameorigin”，这意味着只有在嵌入相同域和相同协议（@ 987654321@ 与http://www.w3schools.com/ 的来源不同。

这里有一些关于 x-frame-options 的文档： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

【讨论】：

您是否正在尝试将外部域页面嵌入到本地页面中/您还处于其他哪种情况？@Alex

是的，就是这样。

你能控制你试图嵌入到 iframe 中的页面的标题吗？@Alex

不，但我找到了解决方法。做一个 window.open，并使用脚本来调整/移动/聚焦打开的窗口以对应于父窗口。不是一个理想的解决方案，但它适用于最终用户。

【参考方案6】：

您需要在 localhost 上有 iframe 的源文件。

Firefox 和 Chrome 不显示此 iframe：

<iframe src="https://www.yourdomain.com/form.html"></iframe>

作品：

<iframe src="/form.html"></iframe>