如何设置＆＃39; X-Frame-Options＃39;在iframe？

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({

如何解决错误：

  

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

使用JavaScript？

Answer 1

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

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

Answer 2

你似乎误解了这个问题。 X-Frame-Options是响应中包含的标头，如果请求的域允许自己在帧中显示，则表明请求。它与javascript或HTML无关，也不能被请求的发起者更改。

此网站设置此标题以禁止它显示在iframe中。你无能为力阻止这种行为。

Further reading on X-Frame-Options

Answer 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

Answer 4

不是......我用了

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

Answer 5

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

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

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

Answer 6

我的virtualmin服务器（apache）在子目录中的wordpress上遇到了同样的问题，上述答案都没有解决我案例中的问题，仍然在控制台上收到x-frame-options denied错误消息，直到我尝试将以下行添加到.htaccess（wordpress root）目录中的public_html\subdirectory\文件中：

header always set x-frame-options "SAMEORIGIN"

这是我案件中唯一可行的解​​决方案。 （请注意，有一部分包含always set而不是append或always append）

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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

Answer 11

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

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

Answer 12

你可以在你想要加载iframe的网站的web配置中设置x-frame-option

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

Answer 13

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

如果您正在httpd.conf文件中使用apache。

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

Answer 14

尝试

response['X-Frame-Options'] = 'ALLOWALL'

或

response['X-Frame-Options'] = 'ALLOW-FROM http://yourdomain.com'

示例

class ExampleView(generic.View):

    @method_decorator(csrf_exempt)
    def dispatch(self, request, *args, **kwargs):
        return super(ExampleView, self).dispatch(request, *args, **kwargs)

    def get(self, request, *args, **kwargs):
        res = api_request('get', 'example/xyx')
        response = HttpResponse(res)
        return self.set_response_header(request, response)

    def options(self, request, *args, **kwargs):
        response = HttpResponse()
        return self.set_response_header(request, response)

    def set_response_header(self, request, response):
        response['Access-Control-Allow-Origin'] = request.META.get('HTTP_ORIGIN') if request.META.get('HTTP_ORIGIN') else '*'
        response['Access-Control-Allow-Headers'] = 'x-requested-with, content-type, accept, origin, authorization, x-csrftoken, user-agent, accept-encoding, cache-control'
        response['Access-Control-Allow-Methods'] = 'GET, POST, PUT, PATCH, DELETE, OPTIONS'
        response['Access-Control-Max-Age'] = '86400'
        response['Access-Control-Allow-Credentials'] = 'true'
        response['X-Frame-Options'] = 'ALLOWALL'
        return response

Answer 15

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

Answer 16

（由于我想分享我为解决此问题而创建的变通方法，因此我正在恢复此答案）

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

以下是该概念的直观图表：

由于我对发现的CORS代理感到不满意，所以最终我自己创建了一个我称为 CORSflare 的计算机：该计算机旨在运行在Cloudflare Worker（无服务器计算）中，因此这是100％免费的解决方法-只要您不需要每天接受超过100.000个请求即可。

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

Answer 17

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

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