问题描述

通过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>

检验

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