files/zh-tw/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

---
title: X-Frame-Options 回應標頭
slug: Web/HTTP/Headers/X-Frame-Options
translation_of: Web/HTTP/Headers/X-Frame-Options
---
<p>{{ gecko_minversion_header("2.0") }}</p>

<div class="note">
<div class="syntaxbox"><strong>Note: </strong>CSP Level 2 的 <a href="/en-US/docs/Security/CSP/CSP_policy_directives#frame-ancestors">frame-ancestors</a> 指令標準雖然已經取代了非標準的 X-Frame-Options，而自 {{Gecko("4.0")}} 起也開始支援  frame-ancestors 指令，但因為並非所有瀏覽器都支援 frame-ancestors，所以 支援度較廣的 X-Frame-Options 還是可以和  CSP 一起採用。</div>
</div>

<p><span style="line-height: 1.5;">X-Frame-Options </span><a href="/en/HTTP" style="line-height: 1.5;" title="en/HTTP">HTTP</a><span style="line-height: 1.5;"> 回應標頭 (header) 用來指示文件是否能夠載入 {{ HTMLElement("frame") }}, {{ HTMLElement("iframe") }} 以及 {{ HTMLElement("object") }}，網站可以利用 </span><span style="line-height: 19.0909080505371px;">X-Frame-Options 來確保本身內容不會遭惡意嵌入道其他網站、避免 </span><span style="line-height: 1.5;">clickjacking 攻擊</span></p>

<h2 id="使用_X-Frame-Options">使用 X-Frame-Options</h2>

<p>共有三種值：</p>

<dl>
 <dt><code>DENY</code></dt>
 <dd>表示網頁無論如何都無法被嵌入到 frame 中，即使於相同網域內嵌入也不允許。</dd>
 <dt><code>SAMEORIGIN</code></dt>
 <dd>唯有當符合<a href="/zh-TW/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">同源政策</a>下，才能<span style="line-height: 19.0909080505371px;">被嵌入到 frame 中。</span></dd>
 <dt><code>ALLOW-FROM <em>uri</em></code></dt>
 <dd>［已廢止］唯有列表許可的 URI 才能<span style="line-height: 19.0909080505371px;">嵌入到 frame 中。新版瀏覽器已不再支援此指令。</span></dd>
</dl>

<h3 id="設定_Apache">設定 Apache</h3>

<p>請加入以下指令到網站<span style="line-height: 19.0909080505371px;">組態設定檔</span>：</p>

<pre>Header always append X-Frame-Options SAMEORIGIN
</pre>

<h3 id="設定_nginx">設定 nginx</h3>

<p><span style="line-height: 19.0909080505371px;">請加入以下指令到</span> http, server 或 location 組態設定檔:</p>

<pre><code>add_header X-Frame-Options </code>SAMEORIGIN<code>;</code>
</pre>

<h3 id="設定_IIS">設定 IIS</h3>

<p><span style="line-height: 19.0909080505371px;">請加入以下指令到網站的</span> Web.config 檔:</p>

<pre><code>&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;</code>
</pre>

<h3 id="設定_HAProxy">設定 HAProxy</h3>

<p><span style="line-height: 19.0909080505371px;">請加入以下指令到</span> frontend, listen, 或 backend <span style="line-height: 19.0909080505371px;">組態設定檔</span>:</p>

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

<div class="note">
<p><strong>Note:  </strong>設定 Meta tag 是無效的，像是 &lt;meta http-equiv="X-Frame-Options" content="deny"&gt; 便沒有任何效果，只有透過設定 HTTP header 才有效果，請勿採用。</p>
</div>

<h2 id="sect1"> </h2>

<h2 id="結論">結論</h2>

<p>當載入一個 X-Frame-Options 不允許的網站到 iframe 中， Firefox 會顯示about:blank 的空白頁面，甚至某些狀況還會顯示錯誤訊息。</p>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

{{Compat("http.headers.X-Frame-Options")}}

<h2 id="sect2"> </h2>

<h2 id="延伸閱讀">延伸閱讀</h2>

<ul>
 <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://tools.ietf.org/html/rfc7034" title="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</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>

<p>{{ languages( { "ja": "ja/The_X-FRAME-OPTIONS_response_header"} ) }}</p>