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


170

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

Answers:


227

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

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

在此处输入图片说明


7
使用YouTube,您可以将端点URL更改为“嵌入”版本。请参阅stackoverflow.com/questions/25661182/… (我知道这不是OP严格搜索的内容,但是google首先给出了此结果!)

73

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

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

进一步阅读X-Frame-Options


它在响应头中设置,而不是在请求头中设置。但是,否则准确的解释!
nickang '19

2
@nickang就是我的意思,但是我同意这个术语不清楚。我已经对其进行了编辑,以消除任何混乱。谢谢。
罗里·麦克罗斯

31

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


这对我有帮助。我将这两行注释掉:add_header Strict-Transport-Security "max-age=86400; includeSubdomains"; add_header X-Frame-Options DENY;从nginx-snippets开始,然后立即生效。
Zeth,

NGINX,重要的是说在哪里,内部位置?
彼得·克劳斯

彼得·克劳斯(Peter Kraus),您想要什么?
rubo77

14

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

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

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

5

不是真的...我曾经

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

这看起来像一个解决方案,但这是安全漏洞吗?
Yogurtu

1
不是一个好主意,禁止同源策略为您的网站,除非你知道自己在做什么。您不应允许与您的域不同的域嵌入内容。参见codecademy.com/articles/what-is-cors和类似的教程。
slhck


2

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

5
这是在页面加载后使用的可行解决方案吗?初始加载后是否可以与页面进行交互?加载域后,是否不必代理对域的每个请求才能使用内容?
蒂莫西·冈萨雷斯

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>

0

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

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

请注意,出于安全考虑,完全不建议这样做。


0

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

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

如果我想打开stackoverflow,在哪里可以找到Web配置?服务器端不是吗?
irum zahra

-1

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

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


1
如果您没有答案,那么“您可以”然后将其发布为评论
MK


然后,这是一个可行的建议,而不是特定的解决方案,因此应将其作为注释
MK

-2

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

-3

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

    <security:headers>
        <security:frame-options />
        <security:cache-control />
        <security:content-type-options />
        <security:xss-protection />
    </security:headers>
<security:http>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.