卡卡网

X-Frame-Options响应头，可用于防止您的网站在<frame>，<iframe>或<object>中呈现。它有不同的选项，可以拒绝所有网站访问，可以仅允许来自同一来源访问，也可以允许来自特定来源访问。

本文着重介绍各种浏览器如何响应被X-Frame-Options阻止的内容，至于如何使用X-Frame-Options，可以看看文章后面的知识扩展：使用 X-Frame-Options，也可以参考文章《nginx设置X-Frame-Options的两种方法》、《IIS设置 X-Frame-Options 的方法》。

浏览器响应 - Firefox

Firefox

Firefox在框架里显示空白而不渲染任何内容。

根本没有任何错误消息，除非您进入开发人员控制台，在那里您将看到消息：

X-Frame-Options拒绝加载：http://example.com/ 不允许跨源框架。

根据Mozilla文档页面：“在某些时候，帧中会显示某种错误消息。”

浏览器响应 - Chrome和Safari

Chrome

与Firefox一样，框架里显示空白页面。

同样，如果您在控制台中查看，您将看到两个浏览器当前相同的错误消息：

拒绝在框架中显示'http://www.example.com/'，因为它设置了'X-Frame-Options SAMEORIGIN'。

测试版本：Chrome 46和Safari 9。

浏览器响应 - IE8到IE11

Internet Explorer 11

Internet Explorer 显示错误消息。

其中框架内容通常已经呈现，并带有将框架内容打开到新窗口的链接：

此内容无法在一个框架中显示。为了保护您在本网站上输入的信息的安全性，此内容的发布者不允许它以框架形式显示。您可以尝试：在一个框架中打开此内容新窗户。

浏览器响应 - Edge

Edge浏览器也显示错误消息。

微软的Edge浏览器的工作方式与旧的Internet Explorer版本相同，但内容略有改动：

这个内容不能在一个框架中显示。这里应该有一些内容，但发布者不允许它显示在一个框架中。这有助于保护您可能进入的任何信息的安全性。试试这个：在新窗口中打开它。

结论

我总是使用Javascript将我的网站从框架中删除，但X-Frame-Options响应标头可以防止您的网站被框起而无需编写脚本。遗憾的是，大多数浏览器不像 Internet Explorer / Edge 那样显示明显的错误，以便用户可以轻松点击进入实际的网站。

知识扩展：使用 X-Frame-Options

X-Frame-Options 有三个值:

◆ DENY

表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。

◆ SAMEORIGIN

表示该页面可以在相同域名页面的 frame 中展示。

◆ ALLOW-FROM uri

表示该页面可以在指定来源的 frame 中展示。

换一句话说，如果设置为 DENY，不光在别人的网站 frame 嵌入时会无法加载，在同域名页面中同样会无法加载。另一方面，如果设置为 SAMEORIGIN，那么页面就可以在同域名页面的 frame 中嵌套。

配置 Apache

配置 Apache 在所有页面上发送 X-Frame-Options 响应头，需要把下面这行添加到 'site' 的配置中:

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

配置 nginx 发送 X-Frame-Options 响应头，把下面这行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options SAMEORIGIN;

配置 IIS

配置 IIS 发送 X-Frame-Options 响应头，添加下面的配置到 Web.config 文件中:

<system.webServer>
 ...

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

 ...
</system.webServer>

标签: 浏览器  X-Frame-Options