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 将元素显示在屏幕的中央的代码
Feb 27 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
英国领先的游戏零售商:GAME
2019/09/24 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
高校自主招生自荐信
2013/12/09 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
销售主管竞聘书
2014/03/31 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
计算机实训报告总结
2014/11/05 职场文书
整改落实自查报告
2014/11/05 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
八年级英语教学反思
2016/02/15 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
解决Pytorch中关于model.eval的问题
2021/05/22 Python
MySQL 时间类型的选择
2021/06/05 MySQL
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers