X-Frame-Options響應頭的檢測與配置

 

簡介

 

X-Frame-Options HTTP 響應頭是用來給瀏覽器指示允許一個頁面可否在 <frame>, </iframe> 或者 <object> 中展現的標記。網站可以使用此功能，來確保自己網站的內容沒有被嵌套到別人的網站中去，也從而避免了點擊劫持 (clickjacking) 的攻擊。

 

X-Frame-Options三個參數:

1、DENY

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

 

2、SAMEORIGIN

表示該頁面可以在相同域名頁面的frame中展示。通常使用此項。

 

3、ALLOW-FROM uri

表示該頁面可以在指定來源的frame中展示。

 

如何進行檢測

 

配置后如何確定X-Frame-Options是否已生效呢？我這里以Google瀏覽器為例，打開網站按F12鍵，選擇Network，找到對應的Headers，如下圖所示

 

 

 

響應頭配置詳解

 

配置 Apache

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

Header always set X-Frame-Options "sameorigin"

 

要將 Apache 的配置 X-Frame-Options 設置成 deny , 按如下配置去設置你的站點：

Header set X-Frame-Options "deny"

 

要將 Apache 的配置 X-Frame-Options 設置成 allow-from，在配置里添加：

Header set X-Frame-Options "allow-from https://example.com/"

 

配置 nginx

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

add_header X-Frame-Options sameorigin always;

 

配置 IIS

配置 IIS 發送 X-Frame-Options 響應頭，添加下面的配置到 Web.config 文件中：

<system.webServer>

  ...

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

  ...

</system.webServer>

 

配置 HAProxy

配置 HAProxy 發送 X-Frame-Options 頭，添加這些到你的前端、監聽 listen，或者后端的配置里面：

rspadd X-Frame-Options:\ sameorigin

 

或者，在更加新的版本中：

http-response set-header X-Frame-Options sameorigin

 

 

配置 Express

要配置 Express 可以發送 X-Frame-Options header，你可以用借助了 frameguard 來設置頭部的 helmet。在你的服務器配置里面添加：

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: "sameorigin" }));

 

或者，你也可以直接用 frameguard：

const frameguard = require('frameguard')
app.use(frameguard({ action: 'sameorigin' }))

 

.htaccess方法

在網站根目錄下的.htaccess文件中中加一句

Header append X-FRAME-OPTIONS "SAMEORIGIN"

 

參考鏈接

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options