js 监控iframe URL的变化实例代码


Posted in Javascript onJuly 12, 2017

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的变化实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 #Javascript
基于zepto.js实现手机相册功能
Jul 11 #Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 #Javascript
详解Webpack DLL用法以及功能
Jul 11 #Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 #Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 #Javascript
You might like
php字符串操作常见问题小结
2016/10/11 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python实现一个简单的MySQL类
2015/01/07 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
java字符串格式化输出实例讲解
2021/01/06 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB