(ok)拦截网络运行商恶意注入的静态脚本

作者: wxfeng 分类: web前端 发布时间: 2018-09-15 00:00

 

问题描述

通过PC使用网络时,页面代码加载正常

通过手机,使用4G访问时,页面代码加载也正常

但在使用wifi访问网站时,查看网站源代码,页面底部多出来的一部分代码,这些代码通过<script>引入了三个静态脚本文件,如下:

被注入的代码:

...省略.....
</body>
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script> 
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> 
</html>

正常的应该是这样:

...省略.....
</body>
</html>

 

分析

根据出现的问题,推测造成错误的原因应该是:在使用手机,链接wifi访问网站时,网络运营商会在网站底部注入以上的代码。

 

解决方法

通过html5提供的api:Mutation Observer(变动观察器)对代码进行检测,当检测到引入有非正常的静态脚本文件时,进行拦截,代码如下:

<script type="application/javascript">
    // MutationObserver 的不同兼容性写法
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver ||
        window.MozMutationObserver;
    // 该构造函数用来实例化一个新的 Mutation 观察者对象
    // Mutation 观察者对象能监听在某个范围内的 DOM 树变化
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 返回被添加的节点,或者为null.
            var nodes = mutation.addedNodes;
            for (var i = 0; i < nodes.length; i++) {
                var node = nodes[i];
                if (/bootcss/i.test(node.src)) {
            try {
                node.parentNode.removeChild(node);
                console.log('拦截可疑静态脚本:', node.src);
            } catch (e) {}
        }
    }
    });
    });
    // 传入目标节点和观察选项
    // 如果 target 为 document 或者 document.documentElement
    // 则当前文档中所有的节点添加与删除操作都会被观察到
    observer.observe(document, {
        subtree: true,
        childList: true
    });
</script>

 

检验

如果拦截成功,在控制台可以看到,如下图所示

图片.png

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注