js监控内联框架网址的变化实例代码

内联框架的全球资源定位器(统一资源定位符)可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过射流研究…把科学研究委员会改成了危险地址，如果没有监控，就会有很大隐患。所以监控内联框架的全球资源定位器(统一资源定位符)变化就是必须要解决的问题了。

第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。

千般搜索，终于找到了好的方法，可以通过H5新增的突变观察器来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。

废话少说，直接上代码。

index.html代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title/head dy iframe id=' iframeId ' src=' http 3360https://m。ppdai。com '/iframe脚本类型=' text/JAVAScript ' charset=' utf-8 ' async delay var elemIframList=document。getelementsbytagname(' iframe ')；for(var I=0；ielemiframlist . lenhei){ initiframchange(Elemiframlist[I])；}函数初始帧变化(ElemiFram){ if(window .突变服务器| |窗口。webkitmutationobserver){//chrome var回调=函数(突变){风险投资。foreach(函数(突变){ iframeSrcChanged(突变。旧值，突变。target.src，突变。目标)；});};如果(窗口突变服务器){ var observer=new突变服务器(回调);} else { var observer=new webkitMutationObserver(回调);} observer.observe(elemIfram，{ attributes: true，attribute old value : true })；} else if(elemifram。addeventlistener){//Firefox，Opera和野生动物园。addeventlistener(' domaintrmodided '，function(event){ iframerschanged(event。prev值，event.newValue，event。目标)；}，false)；} else if(elemifram。attachevent){//Internet Explorer elemifram。attach event(' on propertytychange '，function(event){ iframesrchanged(event。prev值，event.newValue，event。目标)；});} }函数iframesrchanged(旧值、新值、iframeObj) { console.log('旧地址：'旧值)；console.log('新地址：' NewValue)；if(NewVaLue。索引为(' AAAA ')-1){控制台。日志('有危险，请马上离开……)IFrameObj。src=旧值；//钓鱼地址，恢复原url }else{ console.log('安全地址，允许跳转……');} } //模拟方法函数SimuChange(){ var div=document。GetElementByID(' IFrameid ')；div.setAttribute('src '，' AAAA。html ')；} /script/body/htmlaaaa.html代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题/head dy aaaaaaaa.html脚本类型=' text/JAVAScript ' charset=' utf-8 '异步延迟控制台。原木(' AAAA页面的射流研究…执行成功)/脚本/正文/html执行结果：

危险情况：

安全情况：

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

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

以上这篇射流研究…监控内联框架网址的变化实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。