防止運營商劫持，前端解決辦法

[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 沒嵌套 ，當前窗口就是頂層窗口