X-Frame-Options

一、問題引入

場景：用iframe嵌入網頁內容時，打開頁面無內容展示(排除網絡不通原因)。打開chrome 調試，發現里面輸出一個錯誤提示：Refused to display 'xxxxxxx' in a frame because it set 'X-Frame-Options' to 'deny'

二、X-Frame-Options是什么

　X-Frame-Options是一個HTTP標頭（header），用來告訴瀏覽器這個網頁是否可以放在iFrame內。

　　例如：

　　1.X-Frame-Options: DENY

　　2.X-Frame-Options: SAMEORIGIN

　　3.X-Frame-Options: ALLOW-FROM http://caibaojian.com/

　　補充：ALLOW-FROM已廢棄，IE可用，其他瀏覽器會報錯

Invalid 'X-Frame-Options' header encountered when loading 'http://www.a.com':
 'ALLOW-FROM http://www.a.com' is not a recognized directive.
 The header will be ignored.

　　可以改用 配置 Content-Security-Policy

Content-Security-Policy: frame-ancestors <source> <source>;
或
Content-Security-Policy: frame-ancestors 'none';//相當於DENY

 

        第一個例子告訴瀏覽器不要（DENY）把這個網頁放在iFrame內，通常的目的就是要幫助用戶對抗點擊劫持。 第二個例子告訴瀏覽器只有當架設iFrame的網站與發出X-Frame-Options的網站相同，才能顯示發出X-Frame-Options網頁的內容。 第三個例子告訴瀏覽器這個網頁只能放在http://caibaojian.com//網頁架設的iFrame內。 不指定X-Frame-Options的網頁等同表示它可以放在任何iFrame內。 X-Frame-Options可以保障你的網頁不會被放在惡意網站設定的iFrame內，令用戶成為點擊劫持的受害人。

　　另外查了最新的資料，還可以直接通過meta標簽來設置，不需要放在http頭部請求中了。 

　<meta http-equiv="X-Frame-Options" content="deny"> 

　　兩個參數：（作用與上面一致）

1. SAMEORIGIN
2. DENY

三、X-Frame-Options與前端安全

X-Frame-Options HTTP響應頭是用來確認是否瀏覽器可以在frame或iframe標簽中渲染一個頁面，網站可以用這個頭來保證他們的內容不會被嵌入到其它網站中，以來避免點擊劫持。

危害： 攻擊者可以使用一個透明的、不可見的iframe，覆蓋在目標網頁上，然后誘使用戶在該網頁上進行操作，此時用戶將在不知情的情況下點擊透明的iframe頁面。通過調整iframe頁面的位置，可以誘使用戶恰好點擊iframe頁面的一些功能性按鈕上，導致被劫持。

解決方案：

修改web服務器配置，添加X-frame-options響應頭。賦值有如下三種：

（1）DENY：不能被嵌入到任何iframe或frame中。
（2）SAMEORIGIN：頁面只能被本站頁面嵌入到iframe或者frame中。
（3）ALLOW-FROM uri：只能被嵌入到指定域名的框架中。

也可在代碼中加入，在PHP中加入：

header('X-Frame-Options: deny');

四、防止網頁被Frame方法

方法一： 常見的比如使用js，判斷頂層窗口跳轉：

(function () {
if (window != window.top) {
window.top.location.replace(window.location); //或者干別的事情
}
})();

一般這樣夠用了，但是有一次發現失效了，看了一下人家網站就是頂層窗口中的代碼，發現這段代碼：

var location = document.location;
// 或者 var location = "";

輕輕松松被破解了，悲劇。

方法二： meta 標簽：基本沒什么效果，所以也放棄了：

<meta http-equiv="Windows-Target" contect="_top">

方法三：使用HTTP 響應頭信息中的 X-Frame-Options屬性

使用 X-Frame-Options 有三個可選的值：

DENY：瀏覽器拒絕當前頁面加載任何Frame頁面
SAMEORIGIN：frame頁面的地址只能為同源域名下的頁面
ALLOW-FROM：origin為允許frame加載的頁面地址

絕大部分瀏覽器支持

配置 Apache

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

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

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

add_header X-Frame-Options SAMEORIGIN;

更多相關內容本博客另外一篇：【前端安全】JavaScript防http劫持與XSS - 盼星星盼太陽 - 博客園 (cnblogs.com)

來源：https://www.jb51.net/article/109436.htm