aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/http/headers/x-frame-options/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/http/headers/x-frame-options/index.html')
-rw-r--r--files/zh-cn/web/http/headers/x-frame-options/index.html162
1 files changed, 162 insertions, 0 deletions
diff --git a/files/zh-cn/web/http/headers/x-frame-options/index.html b/files/zh-cn/web/http/headers/x-frame-options/index.html
new file mode 100644
index 0000000000..22bc56158a
--- /dev/null
+++ b/files/zh-cn/web/http/headers/x-frame-options/index.html
@@ -0,0 +1,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>