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

[toc]

常见的劫持方式:

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

跳转型劫持：用户输入地址A，但是跳转到地址B

注入型劫持：有别于跳转型型劫持，指通过在正常的网页中注入广告代码(js、iframe等)，实现页面弹窗提醒或者底部广告等，又分为下面三个小类：

注入js类劫持：在正常页面注入劫持的js代码实现的劫持

iframe类劫持：将正常页面嵌入iframe或者页面增加iframe页面

篡改页面类劫持：正常页面出现多余的劫持网页标签，导致页面整体大小发生变化

解决办法：

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

/**

*

*

* 为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)内容安全策略，属于浏览器的的一种安全策略，以白名单作为信任机制，来限制网站是否可以包涵某网站来源。

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

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 没嵌套 ，当前窗口就是顶层窗口