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