防止运营商劫持，前端解决办法
[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 没嵌套 ，当前窗口就是顶层窗口
