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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
js模拟微博发布消息
Feb 23 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
微信小程序实现电影App导航和轮播
Nov 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP网站备份程序代码分享
2011/06/10 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
python中self原理实例分析
2015/04/30 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
抗洪救灾标语
2014/10/08 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
销售员岗位职责范本
2015/04/11 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
高二数学教学反思
2016/02/18 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers