X-Frame-Options 回應標頭

Note: CSP Level 2 的 frame-ancestors 指令標準雖然已經取代了非標準的 X-Frame-Options，而自 Gecko 4.0 起也開始支援 frame-ancestors 指令，但因為並非所有瀏覽器都支援 frame-ancestors，所以支援度較廣的 X-Frame-Options 還是可以和 CSP 一起採用。

X-Frame-Options HTTP 回應標頭 (header) 用來指示文件是否能夠載入 <frame>, <iframe> 以及 <object>，網站可以利用 X-Frame-Options 來確保本身內容不會遭惡意嵌入道其他網站、避免 clickjacking 攻擊

使用 X-Frame-Options

共有三種值：

DENY: 表示文件無論如何都不能被嵌入到 frame 中，即使是自家網站也不行。
SAMEORIGIN: 唯有當符合同源政策下，才能被嵌入到 frame 中。
ALLOW-FROM uri: 唯有列表許可的 URI 才能嵌入到 frame 中。

設定 Apache

請加入以下指令到網站組態設定檔：

Header always append X-Frame-Options SAMEORIGIN

設定 nginx

請加入以下指令到 http, server 或 location 組態設定檔:

add_header X-Frame-Options SAMEORIGIN;

設定 IIS

請加入以下指令到網站的 Web.config 檔:

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

設定 HAProxy

請加入以下指令到 frontend, listen, 或 backend 組態設定檔:

rspadd X-Frame-Options:\ SAMEORIGIN

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

結論

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

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	4.1.249.1042	3.6.9 (1.9.2.9)	8.0	10.5	4.0
ALLOW-FROM support	Not supported	18.0 (18.0) bug 690168	8.0?	?	Not supported WebKit bug 94836

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?	?