如果我像这样创建一个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 ?


你不能在iframe上设置X-Frame-Options。这是由向其请求资源的域(示例中为google.com.ua)设置的响应标头。在本例中,他们将报头设置为SAMEORIGIN,这意味着他们不允许在域外的iframe中加载资源。有关更多信息,请参阅MDN上的X-Frame-Options响应报头。

快速检查标题(在Chrome开发工具中显示)显示X-Frame-Options值从主机返回。


X-Frame-Options是请求响应中包含的报头,用于声明所请求的域是否允许在帧中显示。它与javascript或HTML无关,也不能由请求的发起者更改。

本网站已设置此标头以禁止在iframe中显示。在客户端web浏览器中无法阻止这种行为。

进一步阅读X-Frame-Options


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

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

配置Apache

要为所有页面发送X-Frame-Options报头,请将其添加到站点的配置中:

Header always append X-Frame-Options SAMEORIGIN

Configuring nginx

要配置nginx发送X-Frame-Options报头,将其添加到http、服务器或位置配置中:

add_header X-Frame-Options SAMEORIGIN;

没有配置

这个头选项是可选的,所以如果这个选项根本没有设置,你将给下一个实例配置这个选项(例如访问者浏览器或代理)

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


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");
?>

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

一个发布HTTP报头X-Frame-Options值为DENY(或具有不同服务器源的SAMEORIGIN)的网站不能集成到IFRAME中…除非你通过安装一个忽略X-Frame- options报头的浏览器插件来改变这种行为(例如Chrome的忽略X-Frame报头)。

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


你可以在你想要载入iframe的站点的web配置中设置x-frame选项

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

不是真的…我使用

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

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

一个人必须这样设置(例如apache),这不是最好的选择,因为它允许所有的事情,但在你看到你的服务器正常工作后,你可以很容易地改变设置。

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

你不能真的在你的HTML主体中添加x-iframe,因为它必须由站点所有者提供,并且它在服务器规则中。

你可以做的是创建一个PHP文件,加载目标URL和iframe PHP URL的内容,这应该会顺利工作。


您可以在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>

如果没有帮助,你仍然想在iframe中呈现网站,考虑使用X帧绕过组件,它将利用代理。


(我重新提出这个答案是因为我想分享我为解决这个问题而创建的变通方法)

如果您无法访问在<iframe>元素中托管您想要服务的网页的网站,您可以通过使用启用cors的反向代理来绕过X-Frame-Options SAMEORIGIN限制,该反向代理可以从web服务器(上游)请求web页面并将它们提供给最终用户。

下面是这个概念的可视化图表:

由于我对我发现的CORS代理不满意,我最终自己创建了一个,我称之为CORSflare:它被设计为在Cloudflare Worker(无服务器计算)中运行,因此它是一个100%免费的解决方案-只要你不需要它每天接受超过100,000个请求。

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


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

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