209

如果我创建一个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({

如何修复错误：

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

用JavaScript？

4

14 回答 14

269

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

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

在此处输入图像描述

于 2014-12-08T13:23:55.353 回答
86

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

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

进一步阅读 X-Frame-Options

于 2014-12-08T13:24:07.013 回答
42

如果您控制发送 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

于 2016-03-04T07:37:32.020 回答
20

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

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

           Header set Access-Control-Allow-Origin "*"
           Header set X-Frame-Options "allow-from *"
于 2018-11-28T19:43:21.083 回答
7

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

于 2019-06-26T11:49:41.307 回答
5

不是真的...我用过

 <system.webServer>
     <httpProtocol allowKeepAlive="true" >
       <customHeaders>
         <add name="X-Frame-Options" value="*" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>
于 2018-02-07T12:40:34.063 回答
3

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>

目标网址.php：

<?php 
  echo file_get_contents("http://www.example.com");
?>
于 2016-10-25T11:30:03.350 回答
2

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

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

于 2020-09-21T23:35:07.773 回答
1

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

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

这是该概念的可视化图表：

在此处输入图像描述

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

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

于 2020-07-23T03:09:51.390 回答
0

为此，您需要匹配 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>
于 2015-11-18T10:51:44.663 回答
0

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

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

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

于 2017-05-03T21:26:56.957 回答
0

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

<httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="*" />
    </customHeaders>
  </httpProtocol>
于 2017-11-07T06:06:27.817 回答
-1

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

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

于 2019-03-25T11:50:45.097 回答
-3

您可以在 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>
于 2019-05-30T14:19:10.803 回答