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 相关文章推荐
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
详解JavaScript中Arguments对象用途
Aug 30 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP7 标准库修改
2021/03/09 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
酒店led欢迎词
2014/01/09 职场文书
自我鉴定总结
2014/03/24 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
年度考核表个人总结
2015/03/06 职场文书
销售督导岗位职责
2015/04/10 职场文书
费城故事观后感
2015/06/10 职场文书
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS