卡卡網(wǎng)

X-Frame-Options響應(yīng)頭，可用于防止您的網(wǎng)站在<frame>，<iframe>或<object>中呈現(xiàn)。它有不同的選項(xiàng)，可以拒絕所有網(wǎng)站訪問(wèn)，可以僅允許來(lái)自同一來(lái)源訪問(wèn)，也可以允許來(lái)自特定來(lái)源訪問(wèn)。

本文著重介紹各種瀏覽器如何響應(yīng)被X-Frame-Options阻止的內(nèi)容，至于如何使用X-Frame-Options，可以看看文章后面的知識(shí)擴(kuò)展：使用 X-Frame-Options，也可以參考文章《nginx設(shè)置X-Frame-Options的兩種方法》、《IIS設(shè)置 X-Frame-Options 的方法》。

瀏覽器響應(yīng) - Firefox

Firefox

Firefox在框架里顯示空白而不渲染任何內(nèi)容。

根本沒(méi)有任何錯(cuò)誤消息，除非您進(jìn)入開(kāi)發(fā)人員控制臺(tái)，在那里您將看到消息：

X-Frame-Options拒絕加載：http://example.com/ 不允許跨源框架。

根據(jù)Mozilla文檔頁(yè)面：“在某些時(shí)候，幀中會(huì)顯示某種錯(cuò)誤消息。”

瀏覽器響應(yīng) - Chrome和Safari

Chrome

與Firefox一樣，框架里顯示空白頁(yè)面。

同樣，如果您在控制臺(tái)中查看，您將看到兩個(gè)瀏覽器當(dāng)前相同的錯(cuò)誤消息：

拒絕在框架中顯示'http://www.example.com/'，因?yàn)樗O(shè)置了'X-Frame-Options SAMEORIGIN'。

測(cè)試版本：Chrome 46和Safari 9。

瀏覽器響應(yīng) - IE8到IE11

Internet Explorer 11

Internet Explorer 顯示錯(cuò)誤消息。

其中框架內(nèi)容通常已經(jīng)呈現(xiàn)，并帶有將框架內(nèi)容打開(kāi)到新窗口的鏈接：

此內(nèi)容無(wú)法在一個(gè)框架中顯示。為了保護(hù)您在本網(wǎng)站上輸入的信息的安全性，此內(nèi)容的發(fā)布者不允許它以框架形式顯示。您可以嘗試：在一個(gè)框架中打開(kāi)此內(nèi)容新窗戶。

瀏覽器響應(yīng) - Edge

Edge瀏覽器也顯示錯(cuò)誤消息。

微軟的Edge瀏覽器的工作方式與舊的Internet Explorer版本相同，但內(nèi)容略有改動(dòng)：

這個(gè)內(nèi)容不能在一個(gè)框架中顯示。這里應(yīng)該有一些內(nèi)容，但發(fā)布者不允許它顯示在一個(gè)框架中。這有助于保護(hù)您可能進(jìn)入的任何信息的安全性。試試這個(gè)：在新窗口中打開(kāi)它。

結(jié)論

我總是使用Javascript將我的網(wǎng)站從框架中刪除，但X-Frame-Options響應(yīng)標(biāo)頭可以防止您的網(wǎng)站被框起而無(wú)需編寫(xiě)腳本。遺憾的是，大多數(shù)瀏覽器不像 Internet Explorer / Edge 那樣顯示明顯的錯(cuò)誤，以便用戶可以輕松點(diǎn)擊進(jìn)入實(shí)際的網(wǎng)站。

知識(shí)擴(kuò)展：使用 X-Frame-Options

X-Frame-Options 有三個(gè)值:

◆ DENY

表示該頁(yè)面不允許在 frame 中展示，即便是在相同域名的頁(yè)面中嵌套也不允許。

◆ SAMEORIGIN

表示該頁(yè)面可以在相同域名頁(yè)面的 frame 中展示。

◆ ALLOW-FROM uri

表示該頁(yè)面可以在指定來(lái)源的 frame 中展示。

換一句話說(shuō)，如果設(shè)置為 DENY，不光在別人的網(wǎng)站 frame 嵌入時(shí)會(huì)無(wú)法加載，在同域名頁(yè)面中同樣會(huì)無(wú)法加載。另一方面，如果設(shè)置為 SAMEORIGIN，那么頁(yè)面就可以在同域名頁(yè)面的 frame 中嵌套。

配置 Apache

配置 Apache 在所有頁(yè)面上發(fā)送 X-Frame-Options 響應(yīng)頭，需要把下面這行添加到 'site' 的配置中:

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

配置 nginx 發(fā)送 X-Frame-Options 響應(yīng)頭，把下面這行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options SAMEORIGIN;

配置 IIS

配置 IIS 發(fā)送 X-Frame-Options 響應(yīng)頭，添加下面的配置到 Web.config 文件中:

<system.webServer>
 ...

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

 ...
</system.webServer>

標(biāo)簽: 瀏覽器  X-Frame-Options