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

Posted 2023-02-22

【中文标题】如何在 iframe 上设置“X-Frame-Options”？

【英文标题】：How to set 'X-Frame-Options' on iframe?

【发布时间】：2015-02-06 03:58:54

【问题描述】：

如果我像这样创建iframe：

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

我该如何解决这个错误：

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

使用 javascript？

【参考方案1】：

您不能在iframe 上设置X-Frame-Options。这是您请求资源的域设置的响应标头（在您的示例中为google.com.ua）。在这种情况下，他们将标头设置为 SAMEORIGIN，这意味着他们不允许在其域之外的 iframe 中加载资源。有关详细信息，请参阅 MDN 上的 The X-Frame-Options response header。

快速检查标头（此处显示在 Chrome 开发人员工具中）显示从主机返回的 X-Frame-Options 值。

【讨论】：

使用 YouTube，您可以将端点 URL 更改为“嵌入”版本。请参阅***.com/questions/25661182/…（我知道这不是 OP 严格搜索的内容，但谷歌首先给出了这个结果！）

现在是 2021 年。根据 [developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… MDN 文档），DENY 和 SAMEORIGIN 是唯一剩余的有效选项，而 ALLOW-FROM 被视为已过时。这是否意味着跨站点 iframe 正式成为过去（除非通过插件等明确规避）？

【参考方案2】：

X-Frame-Options 是请求的响应 中包含的标头，用于说明请求的域是否允许其在框架内显示。它与javascript或html无关，并且不能由请求的发起者更改。

此网站已将此标头设置为不允许将其显示在 iframe 中。客户无法阻止这种行为。

Further reading on X-Frame-Options

【讨论】：

设置在响应头中，而不是请求头中。但否则准确的解释！

@nickang 这就是我的意思，但我同意术语不清楚。我已经对其进行了编辑以消除任何混乱。谢谢。

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

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

【参考方案3】：

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

配置 Apache

要为所有页面发送 X-Frame-Options 标头，请将其添加到您网站的配置中：

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

要配置 nginx 以发送 X-Frame-Options 标头，请将其添加到您的 http、服务器或位置配置中：

add_header X-Frame-Options SAMEORIGIN;

无配置

此标头选项是可选的，因此如果根本没有设置该选项，您将提供配置此选项到下一个实例（例如访问者浏览器或代理）的选项

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

【讨论】：

这对我有帮助。我将这两行注释掉：来自 nginx-sn-ps 的 add_header Strict-Transport-Security "max-age=86400; includeSubdomains"; add_header X-Frame-Options DENY;，然后它立即工作。

NGINX，重要的是说在哪里，在里面？

我可以知道我需要为 Apache 设置此标头的位置吗？

对于 Apache，在您网站的 标签内添加选项，很可能是 /etc/apache2/sites-enabled/ 内的配置文件

【参考方案4】：

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

必须设置这样的东西（来自 apache 的示例），这不是最好的选择，因为它允许所有内容，但是在您看到服务器正常工作后，您可以轻松更改设置。

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

【参考方案5】：

如果没有任何帮助，并且您仍想在 iframe 中展示该网站，请考虑使用 X Frame Bypass Component，它将使用代理。

【参考方案6】：

不是真的……我用过

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

【讨论】：

这看起来像是一个解决方案，但这是一个安全漏洞吗？

除非您确切知道自己在做什么，否则为您的网站禁用同源策略不是一个好主意。您不应允许与您不同的域嵌入内容。请参阅codecademy.com/articles/what-is-cors 和类似教程。

【参考方案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"   frameborder="0" ></iframe>

target_url.php：

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

【讨论】：

这是加载后使用页面的可行解决方案吗？初始加载后我可以与页面交互吗？是不是每个域的请求都必须经过代理才能在加载后使用内容？

【参考方案8】：

（我恢复这个答案是因为我想分享我为解决这个问题而创建的解决方法）

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

这是一个概念图：

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

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

【参考方案9】：

为此，您需要匹配 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>

【参考方案10】：

解决方案是安装浏览器插件。

发出 HTTP 标头 X-Frame-Options 且值为 DENY（或 SAMEORIGIN 具有不同服务器来源）的网站无法集成到 IFRAME... 除非您通过安装浏览器插件来更改此行为它忽略了X-Frame-Options 标头（例如Chrome's Ignore X-Frame Headers）。

请注意，出于安全原因，完全不建议这样做。

【参考方案11】：

您可以像这样在要在 iframe 中加载的网站的 web 配置中设置 x-frame-option

<httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="*" />
    </customHeaders>
  </httpProtocol>

【讨论】：

如果我想打开***，我在哪里可以找到网络配置？不是服务器端的吗？

【参考方案12】：

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

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

【参考方案13】：

您不能真正在 HTML 正文中添加 x-iframe，因为它必须由网站所有者提供，并且位于服务器规则范围内。

你可以做的是创建一个 PHP 文件来加载目标 URL 和 iframe 的内容，这应该可以顺利运行。

【讨论】：

“您可能可以”然后将其作为评论发布（如果不是答案）

如果结果是答案MK怎么办

那么这是一个有效的建议，而不是一个具体的解决方案，所以它应该作为评论放置

【参考方案14】：

您可以在 tomcat 实例级配置文件 (web.xml) 中执行此操作 需要在 web.xml 配置文件中添加“过滤器”和过滤器映射。 这将在所有页面中添加 [X-frame-options = DENY]，因为它是一个全局设置。

<filter>
        <filter-name>httpHeaderSecurity</filter-name>
        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
        <async-supported>true</async-supported>
        <init-param>
          <param-name>antiClickJackingEnabled</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>antiClickJackingOption</param-name>
          <param-value>DENY</param-value>
        </init-param>
    </filter>

  <filter-mapping> 
    <filter-name>httpHeaderSecurity</filter-name> 
    <url-pattern>/*</url-pattern>
</filter-mapping>