files/zh-cn/web/http/headers/x-frame-options/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

---
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", "clickjacking")}} 攻击。</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 class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<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" title="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" title="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" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#frame-src">CSP Level 2 frame-ancestors directive</a></li>
</ul>