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. GRPC在NET上的实践（记录篇）

    GRPC是什么? GRPC是一个开源RPC框架,于2015年3月开源,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于Protobuf 3.0(Protocol Buffer ...

  2. 深入理解Java常用类-----时间日期

    除了String这个类在日常的项目中比较常用之外,有关时间和日期的操作也是经常遇到的,本篇就讲详细介绍下Java API中对时间和日期的支持.其实在Java 8之前时间日期的API并不是很好用,以至于 ...

  3. xjoi 2082: 小明的序列

    本文为博主原创文章,未均允许…… 反正我也没法管对吧 www点cnblogs点com/AwD-/ 维护一个序列,初始全为\(1\) 支持两种操作: 1.对于所有的位置\(i\),将它的值乘上\(i + ...

  4. python unittest 测试笔记(二）：使用Requests

    1. Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用.［Python Requests快速入门 :］http://cn.python-requests.org/z ...

  5. 并发容器ConcurrentHashMap#put方法解析

    jdk1.7.0_79 HashMap可以说是每个Java程序员用的最多的数据结构之一了,无处不见它的身影.关于HashMap,通常也能说出它不是线程安全的.这篇文章要提到的是在多线程并发环境下的Ha ...

  6. D语言需要大公司支持

    Facebook开源flint:一个用D语言编写的C++静态代码分析器 http://www.csdn.net/article/2014-02-27/2818565-Building-and-open ...

  7. 单例模式与静态变量在PHP中

    在PHP中,没有普遍意义上的静态变量.与Java.C++不同,PHP中的静态变量的存活周期仅仅是每次PHP的会话周期,所以注定了不会有Java或者C++那种静态变量. 1. 静态变量在PHP中 在PH ...

  8. Ecshop去掉模版中随机出现Ecshop版权的方法

    EC如果是免费用户用的话,模版里面会随机出现 powered by ecshop 的字样,看了一下原来是在COMMON.JS里面写的一段代码,删除掉就可以解决掉了,方法如下: 打开  js/commo ...

  9. thinkphp中fetch渲染模板的处理

    <script type="text/javascript"> function xiugai(elm){ var formData1=$("#a1_&quo ...

  10. [leetcode-551-Student Attendance Record I]

    You are given a string representing an attendance record for a student. The record only contains the ...