如何在iframe上设置'X-Frame-Options'？

Question

如果我像这样创建一个iframe：

var dialog = $('<div id="' + dialogId + '" align="center"><iframe id="' + frameId + '" src="' + url + '" width="100%" frameborder="0" height="'+frameHeightForIe8+'" data-ssotoken="' + token + '"></iframe></div>').dialog({

如何修复JavaScript中的以下错误？

拒绝在框架中显示'https://www.google.com.ua/?gws_rd=ssl'，因为它将'X-Frame-Options'设置为'SAMEORIGIN'。

- Darien Fawkes

Answer 1

您无法在iframe上设置X-Frame-Options。这是由您请求资源的域名（例如您示例中的google.com.ua）设置的响应标头。在此情况下，他们已将标头设置为SAMEORIGIN，这意味着他们禁止在其域之外的iframe中加载该资源。有关更多信息，请参见MDN上的X-Frame-Options响应标头。

通过查看标头（在Chrome开发人员工具中显示），可以快速检查主机返回的X-Frame-Options值。

- Drew Gaynor

---

使用YouTube时，您可以将终端URL更改为“嵌入式”版本。请参见https://dev59.com/zV8e5IYBdhLWcg3whqrl。（我知道这严格来说不是OP正在搜索的内容，但谷歌首先给出了这个结果！） - user4275029

根据最新的MDN文档[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#syntax]，截止到2021年，DENY和SAMEORIGIN是仅存的有效选项，而ALLOW-FROM已被视为过时。这是否意味着跨站点iframe（除非通过插件等明确规避）已正式成为历史？ - Cornel Masson

注意：Content-Security-Policy HTTP头部有一个frame-ancestors指令，对于支持的浏览器来说，这个指令已经取代了该头部。 - Daniel Klimuntowski

Answer 2

X-Frame-Options是一个响应头，用于说明请求的域名是否允许在框架内显示。它与JavaScript或HTML无关，也不能由请求方更改。

该网站已将此标头设置为禁止在iframe中显示。客户端Web浏览器无法阻止此行为。

更多关于X-Frame-Options的阅读资料

- Rory McCrossan

---

它设置在响应头中，而不是请求头中。但是除此之外解释是准确的！ - nickang

@nickang，那就是我想表达的意思，不过我同意术语不够清晰。我已经编辑过了，消除了任何困惑。谢谢。 - Rory McCrossan

客户无法阻止这种行为。- 感谢您澄清这一点！ - klewis

客户端无法阻止这种行为。实际上，我的“客户端”可以是节点服务器（或任何其他服务器），它下载页面内容（爬取）并使内容（包括CSS、JS等）可用于在您自己的站点中加载。 - Gregra

@Gregra，你说得对。不幸的是，有人在我的答案中编辑了“客户端”，从而引发了这个问题。我已经更新了答案，以消除这种歧义。 - Rory McCrossan

Answer 3

如果您控制发送iframe内容的服务器，您可以在web服务器中设置X-Frame-Options。

配置Apache

要为所有页面发送X-Frame-Options标头，请将以下内容添加到您站点的配置中：

Header always append X-Frame-Options SAMEORIGIN

配置nginx

要配置nginx发送X-Frame-Options头，请将以下内容添加到您的http、server或location配置中：

add_header X-Frame-Options SAMEORIGIN;

没有配置

这个头选项是可选的，所以如果根本没有设置该选项，您将给下一个实例（例如访问者的浏览器或代理）配置该选项的机会。

来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

- rubo77

---

这对我很有帮助。我将这两行代码注释了：add_header Strict-Transport-Security "max-age=86400; includeSubdomains"; add_header X-Frame-Options DENY;，然后它立即正常工作了。 - Zeth

NGINX，在哪里很重要，是在location内部吗？ - Peter Krauss

我可以知道在Apache中需要设置此标题的位置吗？ - Pallavi

对于Apache，请在您的网站内部<directive>标签中添加选项，很可能是/etc/apache2/sites-enabled/中的配置文件。 - rubo77

Answer 4

由于服务器端并没有真正提到解决方案：

必须像这样设置（来自Apache的示例）。这并不是最佳选项，因为它允许一切，但在确保服务器正常工作后，您可以轻松更改设置。

Header set Access-Control-Allow-Origin "*"
Header set X-Frame-Options "allow-from *"

- Mike Q

---

我需要在哪里添加这些行？在代理中吗？ - يعقوب

@YaaKouB 我不确定你想要做什么，但是它可以放入 .htaccess 或者 apache 的配置文件中。顺便说一下，https://tecadmin.net/configure-x-frame-options-apache/。 - Mike Q

@MikeQ 我已经尝试过这个，但遇到了一个问题。apache2.service 失败，因为控制进程退出。 - Naren Verma

allow-from已被弃用，您需要移除头部以允许嵌入。请使用Header always unset X-Frame-Options来移除头部。 - undefined

Answer 5

如果无法解决问题，您仍希望在iframe中呈现该网站，请考虑使用X Frame Bypass组件（https://github.com/niutech/x-frame-bypass），该组件将利用代理。

- Tomer Ben David

Answer 6

不是真的...我使用了HTML标签。

 <system.webServer>
     <httpProtocol allowKeepAlive="true" >
       <customHeaders>
         <add name="X-Frame-Options" value="*" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>

- LongChalk

---

这看起来像是一个解决方案，但这是否会造成安全漏洞？ - Yogurtu

除非你确切知道自己在做什么，否则禁用同源策略并不是一个好主意。你不应该允许不同于你的域名嵌入内容。请参考https://www.codecademy.com/articles/what-is-cors和类似教程。 - slhck

这是用于IIS吗？ - undefined

Answer 7

X-Frame-Options HTTP响应头可用于指示浏览器是否应允许在<frame>、<iframe>或<object>中呈现页面。网站可以使用此功能来避免点击劫持攻击，确保其内容不会嵌入到其他站点中。

更多信息： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

我有一种替代解决方案，将使用PHP进行演示：

iframe.php:

<iframe src="target_url.php" width="925" height="2400" frameborder="0" ></iframe>

target_url.php:

<?php 
  echo file_get_contents("http://www.example.com");
?>

- Shailesh Dwivedi

---

加载完成后，这种使用页面的方法可行吗？我是否能够与页面进行交互？为了在加载完成后使用内容，难道不是必须将该域的每个请求都代理吗？ - Timothy Gonzalez

Answer 8

我重新激活这个答案，因为我想分享我创建的解决此问题的解决方法。

如果您无法访问托管要在<iframe>元素中提供的网页的网站，则可以通过使用支持CORS的反向代理来绕过X-Frame-Options SAMEORIGIN限制，该代理可以从Web服务器（上游）请求网页并将其提供给最终用户。

这是概念的可视化图示：

自从我对找到的CORS代理感到不满意，我最终创建了一个自己的代理，我称之为CORSflare：它被设计为在Cloudflare Worker（无服务器计算）中运行，因此它是一个100％免费的解决方案 - 只要您不需要它每天接受超过100,000个请求。

您可以在GitHub上找到代理源代码；包括安装说明在内的完整文档可以在我的博客this post中找到。

- Darkseal

---

服务器A是在请求来自服务器B的内容，还是NodeJS代理在执行此操作？例如，请求IP是否传递到服务器B的API？ - MeSo2

Answer 9

这也是一项新的浏览器安全功能，用于防止网络钓鱼和其他安全威胁。对于Chrome浏览器，您可以下载一个扩展程序来防止浏览器拒绝请求。我在本地使用WordPress时遇到了这个问题。

我使用这个扩展程序：https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

- Nafiu Lawal

Answer 10

为此，您需要匹配Apache或您正在使用的任何其他服务中的位置。

如果您正在使用Apache，则在httpd.conf文件中。

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>

- Ibtesam Latif