iframe的url可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过js把src改成了危险地址，如果没有监控，就会有很大隐患。所以监控iframe的url变化就是必须要解决的问题了。

第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。

千般搜索，终于找到了好的方法，可以通过H5新增的MutationObserver来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。

废话少说，直接上代码。

index.html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <iframe id="iframeId" src="https://m.ppdai.com">

    </iframe>

    <script type="text/javascript" charset="utf-8" async defer>

        var  elemIframList =  document.getElementsByTagName('iframe');

        for(var i=0;i<elemIframList.length;i++){

            initIframeChange(elemIframList[i]);

        }

        function  initIframeChange(elemIfram)  {

            if (window.MutationObserver || window.webkitMutationObserver) {

                // chrome

                var callback = function(mutations) {

                    mutations.forEach(function(mutation) {

                        iframeSrcChanged(mutation.oldValue,mutation.target.src,mutation.target);

                    });

                };

                if (window.MutationObserver) {

                    var observer = new MutationObserver(callback);

                } else {

                    var observer = new webkitMutationObserver(callback);

                }

                observer.observe(elemIfram, {

                    attributes: true,

                    attributeOldValue: true

                });

            } else if (elemIfram.addEventListener) {

                // Firefox, Opera and Safari

                elemIfram.addEventListener("DOMAttrModified", function(event){iframeSrcChanged(event.prevValue,event.newValue,event.target);}, false);

            } else if (elemIfram.attachEvent) {

                // Internet Explorer

                elemIfram.attachEvent("onpropertychange", function(event){iframeSrcChanged(event.prevValue,event.newValue,event.target);});

            }

        }

        function  iframeSrcChanged(oldValue,newValue,iframeObj)  {

            console.log('旧地址：'+oldValue);

            console.log('新地址：'+newValue);

            if(newValue.indexOf('aaaa')>-1){

                console.log('有危险，请马上离开……')

                iframeObj.src=oldValue;//钓鱼地址，恢复原url

            }else{

                console.log('安全地址，允许跳转……');

            }

        }

        // 模拟方法

        function  simuChange()  {

            var  div  =  document.getElementById("iframeId");

            div.setAttribute("src", "aaaa.html");

        }

    </script>

</body>

</html>

aaaa.html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    aaaaaaaa.html

    <script type="text/javascript" charset="utf-8" async defer>

        console.log('aaaa页面的js执行成功')

    </script>

</body>

</html>

执行结果：

危险情况：

安全情况：

我们发现，如果跳转到危险页面，可以直接恢复旧页面，或者跳转指定安全页面，危险页面的js并不会执行。

这貌似就是我们想要的结果。

欢迎大家测试，并提出改进意见，谢谢！

js 监控iframe URL的变化的更多相关文章

  1. js监听url的hash变化和获取hash值

    当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...

  2. C# 修改iframe url

    一.修改本级的iframe url 首先在js中编写函数: <script type="text/javascript"> function reloadfrm2() ...

  3. Zabbix监控Low level discovery实时监控网站URL状态

    今天我们来聊一聊Low level discovery这个功能,我们为什么要用到loe level discovery这个功能呢? 很多时候,在使用zabbix监控一些东西,需要对类似于Itens进行 ...

  4. js 获取iframe页面元素

      js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --> <iframe id ...

  5. js对iframe内外（父子）页面进行操作

    dom对象推荐阅读 怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是conten ...

  6. js中获取URL中指定的查询字符串

    js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...

  7. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  8. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  9. JS操作iframe

    1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...

随机推荐

  1. java web 数据库开发1

    一个完整的数据库部署架构通常由客户端和服务器端两部分组成.客户端封装数据库请求将其发送给服务器端,服务器端执行完毕将其及结果返回给服务器端. 以mysql为例 介绍java应用程序对数据库的访问 JD ...

  2. pycharm5工具免费分享及安装教程

    好东西,就要分享,最近在捣鼓Python,所以就找个pycharm5工具,感觉挺好用的. 废话不多说了,所见即所得: 百度云盘分享:http://pan.baidu.com/s/1sk9k4Nj 密码 ...

  3. Grid search in the tidyverse

    @drsimonj here to share a tidyverse method of grid search for optimizing a model's hyperparameters. ...

  4. Linux下让一个程序开机自动启动

    1.chkconfig但是要在脚本中满足一定的条件(/etc/init.d/)下存在相关服务 2.将启动的程序写入到/etc/rc.local 选择建议: /etc/rc.local可以作为开机启动程 ...

  5. sqlserver删除重复的数据

    分享链接: http://blog.csdn.net/s630730701/article/details/52033018 http://blog.csdn.net/anya/article/det ...

  6. javaSE_07Java中类和对象-封装特性-思维导图

    思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 : 2)右击在新标签中打开放大查看 (IE不支持,搜狗,360可以):

  7. 使用MySQLdb操作Mysql数据库

    MySQLdb简介 MySQL是一个小型关系型数据库管理系统,开发者为瑞典MySQLAB公司.在2008年1月16号被Sun公司收购.目前MySQL被广泛地应用在Internet上的中小型网站中.由于 ...

  8. MyBatis介绍

    MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis 使用简单的 XML或注解用于配 ...

  9. CenOS http 安装与运行

    1.yum安装http [root@localhost ~]# yum install httpd -y 2.启动http服务 [root@localhost ~]# systemctl start  ...

  10. XWindow启动流程

    X Window系统架构 一.基本概念: 1.X Client:X客户端,运行在远端主机上 X Client最重要的工作就是处理来自 X Server 的动作,将该动作处理成为绘图数据, 再将这些绘图 ...