防止網頁被其餘網頁iframe嵌套的思考與實現

防止網頁被其餘網頁iframe嵌套的思考與實現

1、 今天接到一個消息，說咱們的登陸頁面被其餘網頁嵌套了，不能讓其餘網頁嵌套咱們的頁面；

2、 風險驗證措施：

1. 沒法跨域獲取iframe頁面內DOM元素

window.onload=function(){
        var iframe = document.getElementsByTagName("iframe")[0];
        var win = iframe.contentWindow;  // 經過contentWindow獲取ifame子頁面的window窗體對象。(不容許跨域名訪問)
        var iframeDocument = iframe.contentWindow.document;
        var input1 = iframeDocument.getElementById("id1");
        input1.onblur = function() {
            console.log(input1.value)
        }
    }
複製代碼

2. 監聽按鍵信息：

• 當用戶點擊不在非iframe區域時，能被外部的document監聽到；

document.onkeydown=function(e){
        var keyNum=window.event?e.keyCode:e.which;
        console.log(keyNum)
    }
複製代碼

• 當用戶點擊在iframe嵌套的網頁裏面，不會被外部的document監聽，而是iframe的contentWindow.document對象，可是非同域名網頁，沒法獲取iframe子頁面的winodw窗體對象；

var iframe = document.getElementsByTagName("iframe")[0];
    var win = iframe.contentWindow;   
    if(win){
        var iframeDocument = iframe.contentWindow.document;
        iframeDocument.addEventListener("keydown",function(e){
            var keyNum=window.event?e.keyCode:e.which;
            console.log("iframe-----"+keyNum)
        })
    }   
     
複製代碼

3、小結

雖然網頁沒法獲取非同域名下的內嵌網頁的DOM相關信息，可是假如用戶習慣了在某個非官方的登入入口進入，當該非官方的頁面某天更改代碼，假設前幾回進入的是一個僞造的界面（釣魚網站），以後登錄出錯後再切成iframe，用戶信息就會被盜取，因此有這個風險，參考baidu、youku、youtube都有作這個處理；

• Refused to display 'https://youku.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

4、處理

參考文章：

• 刪除對標籤中X-Frame-Options的支持
• MDN..X-Frame-Options 響應頭
• 關於防止本身網頁內容被別人iframe的問題
• 禁止網站被別人經過iframe引用

1. 前端方法：

if (window.top != window.self) {
        // top.location.href = "http://192.168.57.1:8023/";
        console.log('被嵌套')
        alert("dosth")
    }
複製代碼

評價： 能夠有多種方式繞開，不建議這樣作，好比：

document.write('<iframe seamless sandbox security="restricted" id="url_mainframe" frameborder="0" scrolling="yes" name="main" src="http://192.168.57.1:8023/" style="height:100%; visibility: inherit; width: 100%; z-index: 1;overflow: visible;"></iframe>');
複製代碼

2. 網上不少文章說起的Meta標籤加X-FRAME-OPTIONS屬性，經過google搜索meta和X-FRAME-OPTIONS關鍵字，發現該方法已經被棄用了。 X-FRAME-Options in the meta tag

來自2016年的郵件：

＃摘要

當存在於<meta>標籤內時，'X-Frame-Options'將被忽略（例如<meta http-equiv =「X-Frame-Options」contents =「DENY」>）。它將繼續做爲HTTP標頭支持。

＃動機

咱們目前嘗試經過在解析標記時取消頁面加載並導航到空白頁面來支持<meta>標記內的X-Frame-Options。這有點功能，但不徹底是可靠的保護。

實際上，咱們全部的XFO實現都有些不可靠，由於它們都是在Blink中實現的。咱們正在努力將其遷移到瀏覽器進程，但若是咱們須要支持<meta>實現，那將很難乾淨利落。咱們要麼須要Blink和//內容的實現，要麼咱們須要另外一個IPC。

我更願意刪除功能。

3. 建議後端經過添加響應頭的方法實現，不作贅述，直接看MDN文檔： X-Frame-Options 響應頭

值得注意的是X-Frame-Options 有三個值，它們不止約定是否同域名，還約定了同協議，也就是說假如設定了屬性爲SAMORIGIN，訪問的父網頁網址與內嵌網頁的網址http協議應該要要一致（父網頁爲http，子網頁協議爲https,也沒法訪問；可是當父網頁爲https，子網頁爲http的狀況，未作驗證）

DENY

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

SAMEORIGIN

表示該頁面能夠在相同域名頁面的 frame 中展現。

ALLOW-FROM uri

表示該頁面能夠在指定來源的 frame 中展現。

5、檢驗和結論

1. 由於是後端添加HTTP響應頭的方法，因此瀏覽器應該不會出現兼容性的問題，不過照常作了簡單測試，PC端測試了Chrome，UC，FireFox，Opera，百度，QQ，360，IE11，移動端測試了手機QQ，都符合預期；

2. 經過後端添加HTTP響應頭的方法實現避免網頁被嵌套的結果，在控制檯報的錯誤，與嵌套Youtube與youkun效果一致：

• Refused to display 'https://youku.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.；