防止运营商劫持，前端解决办法

[toc]

常见的劫持方式:

按照劫持的方法不同，我将劫持分为下面两类：

• 跳转型劫持：用户输入地址A，但是跳转到地址B
• 注入型劫持：有别于跳转型型劫持，指通过在正常的网页中注入广告代码（js、iframe等），实现页面弹窗提醒或者底部广告等，又分为下面三个小类：
• 注入js类劫持：在正常页面注入劫持的js代码实现的劫持
• iframe类劫持：将正常页面嵌入iframe或者页面增加iframe页面
• 篡改页面类劫持：正常页面出现多余的劫持网页标签，导致页面整体大小发生变化

解决办法：

针对注入js，添加资源过滤

    /**
     * <div class="page" data-res="trust"></div>
     * <link rel="stylesheet" href="css/reset.css" data-res="trust">
     * 为css，js，div，添加H5自定义标签，data-res="trust",然后遍历dom，将不是自定义标签dom资源清除掉。
     */
    //原生版
    function clearAdv() {
        var head = document.getElementsByTagName('head')[0];
        var children = head.childNodes;
        var res;
        var source = 'trust'; //信任资源
        for (var i in children) {
            if (children.hasOwnProperty(i)) {
                tagName = children[i].tagName;
                if (tagName && tagName == 'SCRIPT') {
                    res = children[i].dataset['res'];
                    if (res != source) {
                        head.removeChild(children[i]);
                    }
                }
            }
        }
        var body = document.getElementsByTagName('body')[0];
        if (body) {
            children = body.childNodes;
            for (var k in children) {
                if (children.hasOwnProperty(k)) {
                    var tagName = children[k].tagName;
                    if (tagName) {
                        res = children[k].dataset['res'];
                        if (res != source) {
                            body.removeChild(children[k]);
                        }
                    }
                }
            }
        }
    }

    //zepto版
    function clearAdv() {
        var $body = $('body');
        var source = 'trust'; //信任资源
        var $head = $('head');
        var $headScript = $head.children('script');
        $headScript.each(function () {
            if ($(this).data('res') != source) {
                $(this).remove();
            }
        });
        var $bodyScript = $body.children('script');
        $bodyScript.each(function () {
            if ($(this).data('res') != source) {
                $(this).remove();
            }
        });
        var $div = $body.children();
        $div.each(function () {
            if ($(this).data('res') != source) {
                $(this).remove();
            }
        });
    }

针对加载资源，添加白名单控制

csp（Content Security Policy）内容安全策略，属于浏览器的的一种安全策略，以白名单作为信任机制，来限制网站是否可以包涵某网站来源。

详细配置说明
https://imququ.com/post/content-security-policy-reference.html

把以下代码，放到页面head里。

    <meta http-equiv="Content-Security-Policy"
          content="default-src *; frame-src 'self' style-src 'self' http://*.trust.com https://*.trust.com 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.trust.com https://*.trust.com;">

针对iframe嵌套

把以下代码，放到页面head里。

    (function (window) {
        if (window.location !== window.top.location) {
            window.top.location = window.location;
        }
    })(this);

判断当前的窗口有没有被嵌套在别的窗口中，如果window.top = window.self 没嵌套 ，当前窗口就是顶层窗口