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
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

---
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>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatChrome(4.1.249.1042) }}</td>
   <td>{{ CompatGeckoDesktop(1.9.2.9) }}</td>
   <td>{{ CompatIE(8.0) }}</td>
   <td>{{ CompatOpera(10.5) }}</td>
   <td>{{ CompatSafari(4.0) }}</td>
  </tr>
  <tr>
   <td>ALLOW-FROM support</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoDesktop(18.0) }} {{ bug(690168) }}</td>
   <td>{{ CompatIE("8.0?") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }} {{webkitbug(94836)}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<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>