js 监控iframe URL的变化

时间：2022-03-30 21:38:04

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 监控iframe URL的变化

安全情况：

js 监控iframe URL的变化

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

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

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

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

  1. C&num; 修改iframe url

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

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

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

  3. js 获取iframe页面元素

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

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

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

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

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

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

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

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

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

  8. JS操作iframe

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

  9. 【jQuery】JS中拼接URL发送GET请求的中文、特殊符号的问题

    > 参考的优秀文章 jQuery ajax - param() 方法 经常,我们需要在JS中拼接URL然后以GET形式提交请求.如果遇到中文.特殊符号则需要作各种处理. jQuery有一个方法非 ...

随机推荐

  1. apache2&period;4 windows764 python cgi

    修改conf下的httpd.conf; 1:Listen和ServerName修改为相同的端口号,如8066 2:ScriptAlias就让他留在原位置,"${SRVROOT}/cgi-bi ...

  2. CSS 选择器汇总

    CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS ...

  3. &period;NET动态加载用户控件并传值的方法

    ASPX.CS里的代码: VoteChat.GetType().GetProperty("vid").SetValue(VoteChat, model.id.ToString(), ...

  4. EasyGUI基础教程

    安装EasyGUI 教程http://www.cnblogs.com/zym941001/p/5323319.html Helloworld import easygui as g g.msgbox( ...

  5. &lbrack;linux&rsqb;ubuntu apt-get安装软件失败

    1.首先查看 dns 配置 sudo vi /etc/resolv.conf nameserver 114.114.114.114 nameserver 8.8.8.8 2.修改 apt-get 源 ...

  6. php 分页类（3）

    <?php class Page { private $total; //总记录 private $pagesize; //每页显示多少条 private $limit; //limit pri ...

  7. 虚函数&amp&semi;多态

    对于经常被问到的虚函数和多态的问题,发现百度百科回答得十分详细,所以自己在百度百科上的解释进行总结 一.虚函数 (1)虚函数简介:在某基类中声明为virtual并在一个或者多个派生类中被重新定义的成员 ...

  8. WebDriver多浏览器测试

    selenium2 基于对象的测试,在selenium2中一共支持以下浏览器: Firefox(FirefoxDriver) IE(InternetExplorerDriver) Chrome(Chr ...

  9. 使用Swashbuckle构建RESTful风格文档

    本次和大家分享的是Swagger to WebApi的nuget包Swashbuckle:因为项目需要统一api文档的风格,并要支持多种开发语言(C#,java,python),所以首先想到的是swa ...

  10. Solr7&period;1---简单搜索

    本文环境基于上一节. and搜索 两种用法: apple AND banana +apple +banana [+是一元操作符,要求求后面的查询部分必需在文档中出现.AND是二元操作符,要求其左右两端 ...

相关文章