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. 面试(3)-java-se-java中的匿名内部类总结

    java中的匿名内部类总结 匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1 ...

  2. 详解C# Tuple VS ValueTuple（元组类 VS 值元组）

    C# 7.0已经出来一段时间了,大家都知道新特性里面有个对元组的优化,并且网上也有大量的介绍,这里利用详尽的例子详解Tuple VS ValueTuple(元组类VS值元组),10分钟让你更了解Val ...

  3. Javascript创建类和对象

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...

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

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

  5. Coursera 机器学习笔记（三）

    主要为第四周.第五周课程内容:神经网络 神经网络模型引入 之前学习的线性回归还是逻辑回归都有个相同缺点就是:特征太多会导致计算量太大.如100个变量,来构建一个非线性模型.即使只采用两两特征组合,都会 ...

  6. Edison与Arduino通过USB对接通信

    虽然Edison本身就装在一块Arduino扩展板上,但当要接的传感器太多了的时候一个扩展板也不够用了.因此需要再用一Arduino板扩展功能.而两者需要通信才能达到一个整体的效果,因此这里介绍如何用 ...

  7. PHP·笔记（函数总结）

    PHP 指 PHP:超文本预处理器(译者注:PHP: Hypertext Preprocessor,递归命名) PHP 是一种服务器端的脚本语言,类似 ASP PHP 脚本在服务器上执行 PHP 支持 ...

  8. 用JMX远程监控Tomcat

    要通过JMX远程监控Tomcat,首先需要进行Tomcat的JMX远程配置. 注意:此配置添加在catalina.bat文件开头的注释行(rem)后面即可. 不需鉴权的配置: 先修改Tomcat的启动 ...

  9. MyBatis介绍

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

  10. IPhone开发“此证书是由未知颁发机构签名”解决办法

    有一种情况是你删除了钥匙串中的系统文件,只要重新下载,并双击(会自动添加到钥匙串中)就ok了. 从浏览器中直接敲入下载地址:http://developer.apple.com/certificati ...