diff options
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.html | 161 |
1 files changed, 161 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..2b6cfcda76 --- /dev/null +++ b/files/zh-cn/web/http/headers/x-frame-options/index.html @@ -0,0 +1,161 @@ +--- +title: X-Frame-Options +slug: Web/HTTP/X-Frame-Options +tags: + - HTTP + - 响应头 + - 响应头部 + - 安全性 +translation_of: Web/HTTP/Headers/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><meta http-equiv="X-Frame-Options" content="deny"></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"><system.webServer> + ... + + <httpProtocol> + <customHeaders> + <add name="X-Frame-Options" value="sameorigin" /> + </customHeaders> + </httpProtocol> + + ... +</system.webServer> +</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> |