防止网页被其余网页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'.；