hugh 的个人博客

Everyday is a new day

防止`运营商劫持`,CSP or JS方法处理

如果有https的条件,尽量使用https,可以很大程度上防止劫持的发生

csp

 问题: 可能导致部分js被莫名的 blocked

 辅助用法: 基于csp的report功能,对运行环境中加载的资源进行上报监控

js方式

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver ||  window.MozMutationObserver;
            var whiteListForCSP = [
                'http(s)?:\/\/(.)+.xxx.com',
                'http(s)?:\/\/hm.baidu.com',
                'http(s)?:\/\/res.wx.qq.com'
            ]
        // Mutation 观察者对象能监听在某个范围内的 DOM 树变化
        if(MutationObserver) {
            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];
                        var tagName = node.tagName && node.tagName.toLowerCase()
                        if ((tagName === "script" || tagName === "iframe" || tagName === "img" || tagName === "link") && node.src && (node.src.indexOf(window.location.protocol+"://"+window.location.hostname) !=0 && !new RegExp("^("+whiteListForCSP.join(")|(")+")").test(node.src))) {
                            try {
                                node.parentNode.removeChild(node);
                                console.log('拦截非白名单文件:', node.src);
                            } catch (e) {}
                        }
                    }
                })
            })
        }
        // 传入目标节点和观察选项
        observer.observe(document, {
            subtree: true,
            childList: true
        });</pre>

 

 


标题:防止`运营商劫持`,CSP or JS方法处理
作者:hugh0524
地址:https://blog.uproject.cn/articles/2019/04/29/1556508575314.html