X-Frame-Options HTTP 響應(yīng)頭是用來(lái)給瀏覽器指示允許一個(gè)頁(yè)面是否可以在 <frame>, <iframe>, <embed> 或者 <object> 中展現(xiàn)的標(biāo)記。站點(diǎn)可以通過(guò)確保網(wǎng)站沒(méi)有被嵌入到別人的站點(diǎn)里面,從而避免 Clickjacking 攻擊。通過(guò) Nginx 的作為正向代理,我們可以繞過(guò) X-Frame-Options 限制成功的將第三方網(wǎng)頁(yè)嵌入到自己的頁(yè)面中。
X-Frame-Options
X-Frame-Options 響應(yīng)頭有三個(gè)可能的值:
- deny:表示該頁(yè)面不允許在 frame 中展示,即便是在相同域名的頁(yè)面中嵌套也不允許。
- sameorigin: 表示該頁(yè)面可以在相同域名頁(yè)面的 frame 中展示。
- allow-from uri: 表示該頁(yè)面可以在指定來(lái)源的 frame 中展示。
在 Chrome 嘗試加載 frame 的內(nèi)容時(shí),如果 X-Frame-Options 響應(yīng)頭設(shè)置為禁止訪問(wèn),那么 Chrome 會(huì)在控制臺(tái)中顯示如下錯(cuò)誤。

通過(guò) Nginx 正向代理訪問(wèn)
所謂正向代理就是當(dāng)用戶想獲取某一臺(tái)服務(wù)器上的數(shù)據(jù)而又無(wú)法直接訪問(wèn)服務(wù)器獲取時(shí),通過(guò)一臺(tái)代理服務(wù)器“幫”他從目標(biāo)服務(wù)器上取到數(shù)據(jù)。
在代理服務(wù)器上安裝 nginx 并添加如下配置:
server {
listen 8080;
location / {
proxy_hide_header X-Frame-Options;
proxy_pass http://{target};
}
}
這也當(dāng)請(qǐng)求 http://{proxy_server}:8080 時(shí),nginx 會(huì)做代理轉(zhuǎn)發(fā)到 http://{target},同時(shí)在返回結(jié)果的時(shí)候會(huì)隱藏掉 X-Frame-Options 相應(yīng)頭,這樣我們自己的網(wǎng)頁(yè)就能正常通過(guò) iFrame 載入目標(biāo)網(wǎng)頁(yè)了。