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

2020/10/23 02:22 · javascript ·  · 0评论

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

您无法X-Frame-Options在上设置iframe这是由您从中请求资源的域设置的响应标头(google.com.ua在您的示例中)。SAMEORIGIN在这种情况下,他们将标头设置为,这意味着他们不允许将资源加载iframe到其域外部。有关更多信息,请参见MDN上的X-Frame-Options响应标头

快速检查标题(在Chrome开发者工具中显示在此处)中,可以发现X-Frame-Options主机返回值。

在此处输入图片说明

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

该网站设置了此标头以禁止在标头中显示iframe客户无法采取任何措施阻止这种行为。

进一步阅读X-Frame-Options

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

配置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

由于服务器端并未真正提及该解决方案:

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

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

不是真的...我曾经

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

如果没有任何帮助,而您仍想在iframe中展示该网站,请考虑使用X帧绕过组件,该组件将利用代理。

X框,选择HTTP响应头可用于指示浏览器是否应该被允许在渲染页面<frame><iframe><object>网站可以通过确保其内容未嵌入其他网站来避免点击劫持攻击。

有关更多信息:https :
//developer.mozilla.org/zh-CN/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>元素中提供服务的网页所在的网站,则可以X-Frame-Options使用启用了CORS的反向代理来规避SAMEORIGIN限制,该代理可以从网络服务器请求网页(上游)并将其提供给最终用户。

这是概念的直观图:

在此处输入图片说明

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

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

为此,您需要匹配您的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中加载要在网站的网站配置中设置x-frame-option

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

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

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

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

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

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

如果您遵循xml方法,则下面的代码将起作用。

    <security:headers>
        <security:frame-options />
        <security:cache-control />
        <security:content-type-options />
        <security:xss-protection />
    </security:headers>
<security:http>

本文地址:http://javascript.askforanswer.com/ruhezaiiframeshangshezhi-x-frame-options.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!