diff options
Diffstat (limited to 'files/zh-tw/web/http/headers/x-frame-options/index.html')
| -rw-r--r-- | files/zh-tw/web/http/headers/x-frame-options/index.html | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/files/zh-tw/web/http/headers/x-frame-options/index.html b/files/zh-tw/web/http/headers/x-frame-options/index.html new file mode 100644 index 0000000000..b19ddffe26 --- /dev/null +++ b/files/zh-tw/web/http/headers/x-frame-options/index.html @@ -0,0 +1,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><system.webServer> + ... + + <httpProtocol> + <customHeaders> + <add name="X-Frame-Options" value="SAMEORIGIN" /> + </customHeaders> + </httpProtocol> + + ... +</system.webServer></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 是無效的，像是 <meta http-equiv="X-Frame-Options" content="deny"> 便沒有任何效果，只有透過設定 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> |