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. struts2.1.6教程十、类型转换

    建立struts2conversion项目,并搭建好struts2的基本开发环境 1.基于Action的直接属性转换 建立t.jsp页面,内容如下: <s:form action="p ...

  2. python+unittest框架整理（一点点学习前辈们的封装思路，一点点成长。。。）

    预期框架整理目标: 1.单个用例维护在单个.py文件中可单个执行,也可批量生成组件批量执行 2.对定位参数,定位方法,业务功能脚本,用例脚本,用例批量执行脚本,常用常量进行分层独立,各自维护在单独的. ...

  3. webpack 2.x 配置

    以下展示2.x 配置文件信息 v1 迁移至 v2 官方有更详细的说明 具体详见 https://webpack.js.org/guides/migrating/ 只列举常用到参数进行描述, 或者我在使 ...

  4. Java之枚举----小试牛刀练习

    1.定义一个电脑品牌枚举类,其中只有固定的几个电脑品牌. 1.1简单枚举类,不设置属性和方法 package 第十四章枚举; public enum Brand { Lenovo,Dell,Accer ...

  5. 543. Diameter of Binary Tree

    https://leetcode.com/problems/diameter-of-binary-tree/#/description Given a binary tree, you need to ...

  6. HTTP权威指南-HTTP报文

    在开始学习本章之前,先来提一些问题,什么是报文?如何创建报文?怎么去理解报文?以及报文的用处有哪些? 什么是报文? 可以这么去理解,如果说HTTP是因特网的信使,那么HTTP报文就是它用来搬东西的包裹 ...

  7. STM8程序在IAR中报错 unable to allocate space for sections

    Error[Lp011]: section placement failed: unable to allocate space for sections/blocks with a total es ...

  8. vue2.0 配置 选项 属性 方法 事件 ——速查

    全局配置 silent  设置日志与警告  optionMergeStrategies   合并策略  devtools  配置是否允许vue-devtools  errorHandler    错误 ...

  9. PHP获取当前的毫秒值

    php本身没有提供返回毫秒数的函数,但提供了一个microtime()函数,借助此函数,可以很容易定义一个返回毫秒数的函数 1. 函数 mixed microtime ([ bool $get_as_ ...

  10. 发布.net mvc遇到的HTTP错误 403.14-Forbidden解决办法

    请检查一下"处理程序映射",里面是否有"ExtensionlessUrlHandler-Integrated-4.0",如果没有,请注册.net4.0 在运行里 ...