---
title: X-Frame-Options
slug: Web/HTTP/Headers/X-Frame-Options
tags:
  - HTTP
  - 响应头
  - 响应头部
  - 安全性
translation_of: Web/HTTP/Headers/X-Frame-Options
original_slug: Web/HTTP/X-Frame-Options
---
<div>{{HTTPSidebar}}</div>

<p>The <strong><code>X-Frame-Options</code></strong> <a href="/en-US/docs/Web/HTTP">HTTP</a> 响应头是用来给浏览器 指示允许一个页面 可否在 {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} 或者 {{HTMLElement("object")}} 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 {{interwiki("wikipedia", "点击劫持")}} 攻击。</p>

<p>The added security is only provided if the user accessing the document is using a browser supporting <code>X-Frame-Options</code>. {{HTTPHeader("Content-Security-Policy")}} HTTP 头中的 <a href="/en-US/docs/Security/CSP/CSP_policy_directives#frame-ancestors">frame-ancestors</a> 指令会<a href="https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options">替代</a>这个非标准的 header。CSP 的 frame-ancestors 会在 {{Gecko("4.0")}} 中支持，但是并不会被所有浏览器支持。然而 <code>X-Frame-Options</code> 是个已广泛支持的非官方标准，可以和 CSP 结合使用。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Header type</th>
   <td>{{Glossary("Response header")}}</td>
  </tr>
  <tr>
   <th scope="row">{{Glossary("Forbidden header name")}}</th>
   <td>no</td>
  </tr>
 </tbody>
</table>

<h2 id="语法">语法</h2>

<p><code>X-Frame-Options</code> 有三个可能的值：</p>

<pre class="syntaxbox">X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
</pre>

<h3 id="指南">指南</h3>

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

<dl>
 <dt><code>deny</code></dt>
 <dd>表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。</dd>
 <dt><code>sameorigin</code></dt>
 <dd>表示该页面可以在相同域名页面的 frame 中展示。</dd>
 <dt><code>allow-from <em>uri</em></code></dt>
 <dd>表示该页面可以在指定来源的 frame 中展示。</dd>
</dl>

<h2 id="例子">例子</h2>

<div class="blockIndicator note">
<p><strong>Note:</strong> 设置 meta 标签是无效的！例如 <code>&lt;meta http-equiv="X-Frame-Options" content="deny"&gt;</code> 没有任何效果。不要这样用！只有当像下面示例那样设置 HTTP 头 <code>X-Frame-Options</code> 才会生效。</p>
</div>

<h3 id="配置_Apache">配置 Apache</h3>

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

<pre>Header always set X-Frame-Options "sameorigin"
</pre>

<p>要将 Apache 的配置 <code>X-Frame-Options</code> 设置成 deny , 按如下配置去设置你的站点：</p>

<pre>Header set X-Frame-Options "deny"
</pre>

<p>要将 Apache 的配置 <code>X-Frame-Options</code> 设置成 <code>allow-from</code>，在配置里添加：</p>

<pre>Header set X-Frame-Options "allow-from https://example.com/"
</pre>

<h3 id="配置_nginx">配置 nginx</h3>

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

<pre>add_header X-Frame-Options sameorigin always;
</pre>

<h3 id="配置_IIS">配置 IIS</h3>

<p>配置 IIS 发送 <code>X-Frame-Options</code> 响应头，添加下面的配置到 Web.config 文件中：</p>

<pre class="brush: xml">&lt;system.webServer&gt;
  ...

  &lt;httpProtocol&gt;
    &lt;customHeaders&gt;
      &lt;add name="X-Frame-Options" value="sameorigin" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;

  ...
&lt;/system.webServer&gt;
</pre>

<h3 id="配置_HAProxy">配置 HAProxy</h3>

<p>配置 HAProxy 发送 <code>X-Frame-Options</code> 头，添加这些到你的前端、监听 listen，或者后端的配置里面：</p>

<pre>rspadd X-Frame-Options:\ sameorigin
</pre>

<p>或者，在更加新的版本中：</p>

<pre>http-response set-header X-Frame-Options sameorigin
</pre>

<h3 id="配置_Express">配置 Express</h3>

<p>要配置 Express 可以发送 <code>X-Frame-Options</code> header，你可以用借助了 <a href="https://helmetjs.github.io/docs/frameguard/">frameguard</a> 来设置头部的 <a href="https://helmetjs.github.io/">helmet</a>。在你的服务器配置里面添加：</p>

<pre class="brush: js">const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: "sameorigin" }));
</pre>

<p>或者，你也可以直接用 <a href="https://helmetjs.github.io/docs/frameguard/">frameguard</a>：</p>

<pre class="brush: js">const frameguard = require('frameguard')
app.use(frameguard({ action: 'sameorigin' }))
</pre>

<h2 id="结果">结果</h2>

<p>在 Firefox 尝试加载 frame 的内容时，如果 X-Frame-Options 响应头设置为禁止访问了，那么 Firefox 会用 about:blank 展现到 frame 中。也许从某种方面来讲的话，展示为错误消息会更好一点。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">标题</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{RFC("7034")}}</td>
   <td>HTTP Header Field X-Frame-Options</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("http.headers.X-Frame-Options")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors"><code>frame-ancestors</code> (CSP)</a></li>
 <li><a href="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li>
 <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li>
 <li><a href="http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li>
 <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors">CSP Level 2 frame-ancestors directive</a></li>
</ul>