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 的空白頁面,甚至某些狀況還會顯示錯誤訊息。

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 No support 18.0 (18.0) bug 690168 8.0? ? No support WebKit bug 94836
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?

 

延伸閱讀

文件標籤與貢獻者

此頁面的貢獻者: jwhitlock, allenown, foxbrush
最近更新: jwhitlock,