script、iframe注入型防运营商劫持

（一）前言
准确是防运营商劫持就是防script、iframe注入型劫持，属于HTTP劫持中的一种。主要是劫持js文件，然后在网页中通过js脚本往网页中注入图片和链接或者框架广告，也叫流量劫持。

至于劫持类型，这里我建议，看这篇文章

（二）实现
对于js注入，我们可以使用一个新API

MutationObserver Api传送门

这里是目前的浏览器兼容性

所以，我们可以看到目前所有浏览器的兼容性是92.79%，手机端的兼容性更高。那么我们是如何实现的

这里我们要看MutationObserver，它会监听指定的DOM发生变化时被调用。那么如果将script插入时候判断下，那么就能过滤掉注入的js文件，iframe，防止js修改我们页面。当然我们还需要增加白名单和安全标签（shendun-eddy），防止CDN被删除。

（二）具体代码

<script shendun-eddy>/*** @note 防劫持代码* @key MutationObserver 提供了监视对DOM树所做更改的能力*/(function() {try {var srcFilterTags = ['script', 'iframe'];// 域名白名单 可以加多个var whiteList = [window.location.hostname,'unpkg.com','polyfill.io','cnzz.com',];// 资源链接匹配规则，元素类型为正则表达式var whiteListReg = [];// 正则匹配whiteList.forEach(function(wl) {// 匹配http开头的域名部分，元素实例会自行修正src中的反斜杠var wlReg = new RegExp('^https?:(//)?[^/]*?' + wl, 'i');whiteListReg.push(wlReg);});// 白名单助手var inWhileList = function(addedNode) {// 例外规则if (addedNode.src === '' &&// shendun-eddy 是script的白名单标签(addedNode.getAttribute('shendun-eddy') !== null ||// iframe空src，html2canvas需要iframe做兼容性检测addedNode.tagName.toLowerCase() === 'iframe')) {return true;}var isInWhiteList = false;whiteListReg.forEach(function(wlReg) {if (wlReg.test(addedNode.src)) {isInWhiteList = true;return false;}});return isInWhiteList;};// dom观察器var mutationHandler = function(records) {records.forEach(function(record) {var addedNodes = [];// 如果src被动态修改，也要进行监管if (record.type.toLowerCase() === 'attributes' &&record.attributeName.toLowerCase() === 'src') {addedNodes.push(record.target);} else {addedNodes = Array.prototype.slice.call(record.addedNodes);}addedNodes.forEach(function(addedNode) {srcFilterTags.forEach(function(tagName) {// 标签匹配 白名单匹配if (addedNode.tagName === tagName.toUpperCase() && !inWhileList(addedNode)) {addedNode.remove();}});});});};var MutationObserver =window.MutationObserver ||window.WebKitMutationObserver ||window.MozMutationObserver,observeMutationSupport = !!MutationObserver;if (observeMutationSupport) {new MutationObserver(mutationHandler).observe(document.documentElement, {childList: true,subtree: true,// 监视src属性修改/*** android 4.4.2 需要声明 attributes* 不声明则attributeFilter则报异常 Uncaught SyntaxError: An invalid or illegal string was specified.*/attributes: true,attributeFilter: ['src']});}var eleList = document.querySelectorAll('script');var len = eleList.length;for (var i = 0; i < len; i++) {if (!inWhileList(eleList[i])) {eleList[i].remove();}}} catch (error) {console.error(error);}if (window.self !== window.top) {alert('脚本检测到存在劫持的风险,如页面不属于请不予理会!',);}})();</script>

（四）总结

当我们网站加入防运营商劫持代码，能防大部分注入型劫持，当然这是第一步，接下来我们要讲解下CSP（内容安全策略）防运营商劫持

script、iframe注入型防运营商劫持相关推荐

CSP(内容安全策略)防运营商劫持
(一)前言 CSP英文全称Content Security Policy,中文意思是内容安全策略. CSP以白名单的机制对网站加载或执行的资源起作用,在网页中,这样的策略通过 HTTP 头信息或者 ...
遇到DNS运营商劫持怎么办、运营商劫持的解决方法有那些
运营商劫持在如今很普遍,相信很多人还不清楚,什么是运营商劫持?遇到DNS运营商劫持怎么办?本次在这里就为大家科普下. 什么是运营商劫持? 运营商是指那些提供宽带服务的ISP,包括三大运营商中国电信.中 ...
什么运营商劫持？运营商劫持分几种？解决办法都有什么？
一.什么是运营商劫持? (1)首先了解什么是运营商: 运营商是指那些提供宽带服务的ISP,包括三大运营商中国电信.中国移动.中国联通,还有一些小运营商,比如长城宽带.歌华有线宽带.运营商提供最最基础的 ...
php避免网页出现运营商劫持,防止运营商劫持，前端解决办法
防止运营商劫持,前端解决办法 [toc] 常见的劫持方式: 按照劫持的方法不同,我将劫持分为下面两类: 跳转型劫持:用户输入地址A,但是跳转到地址B 注入型劫持:有别于跳转型型劫持,指通过在正常的网页 ...
你可能不知道你已经被运营商劫持了
大家想必一定遇到过这种小助(guang )手( gao ): 这个是移动,当然联通和电信也绝对不会放过你,而且网页中间也能加还有PC端其实,你看到的这些广告都是中途被别人暗地里加的,这个别人就是中 ...
运营商劫持狠起来，连json都改
原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处.感谢`neko`的供稿运营商劫持,是常见的流氓手段,它们老少通吃,连孩子都不放过,经常嚣张的在右下角或者网页头尾,弹出一些 ...
当部分地区电信运营商劫持页面，如何识别及解决
[网络安全篇]关于近期个别用户反馈部分地区电信运营商劫持页面,如何识别及解决. 01 DNS是什么 DNS全称是域名系统,它所起到的作用,在于把域名解析为IP地址.我们能访问到某个网站,靠的是连接到该 ...
电信等运营商劫持的解决方法
老是弹出广告,其实这个是由于当地电信或者网通等运营商劫持DNS,然后进行投放他们的广告. 弹出广告一般的现象是先弹出一个114或者vnet.cn的网站,类似114.vnet.cn等等,然后进行跳转到广 ...
运营商劫持是什么意思，如何解决运营商劫持的问题？
网站被劫持跳转到网站无碍乎有四种原因导致的,其中一种就是运营商劫持.运营商不是为我们提供网络服务的吗,为什么会劫持?运营商劫持是怎么回事?如何才能解决运营商劫持的问题? 运营商是指那些提供宽带服务的I ...

script、iframe注入型防运营商劫持

script、iframe注入型防运营商劫持相关推荐

最新文章

热门文章