移动端H5防劫持（防止广告注入）
最近项目中自己的H5网页出现了被劫持插入广告的事件，看好趁着这个节点整理下H5被劫持的原因及防止劫持的方法。
原因：
经过查找和调研市面上出现这种情况的原因大概分为三种：
1.DNS劫持（也就是运营商搞的鬼）
2.http劫持(此类情况最多)
3.项目中使用第三方的jar包
首先定位我们自己出现此类问题应该从以下几个方面查找、调试：
1.网络用的是4g还是wifi？
2.如果是wifi，是不是路边免费的wifi？
3.在什么页面出现？（方便定位是h5页面还是原生界面，对大部分用户，千万不要问他是h5还是原生，只能自己分析，如果原生界面也出现那么第三方jar出现问题的概率很大，如果只是h5界面，那么劫持的可能性很大）
4.使用的是android还是ios客户端
什么是DNS劫持:
首先DNS是什么。在因特网中，机器相互识别靠的是ip，而ip单纯的无意义数字的结合，很难被人类熟记，所以产生了域名，例如[www.baidu.com](https://link.juejin.im/?target=http%3A%2F%2Fwww.baidu.com%2F) 就是域名。那么问题来了，我们输入域名，机器又不认识，那么机器怎么去访问？那么就轮到DNS出场了，DNS在作为域名和IP地址相互映射的一个分布式数据库，就是我们的浏览器，会将域名拿到DNS去解析出ip地址来访问，DNS劫持是指在劫持的网络范围内拦截域名解析的请求，分析请求的域名，把审查范围以外的请求放行，否则返回假的IP地址或者什么都不做使请求失去响应，其效果就是对特定的网络不能反应或访问的是假网址。
通俗来说，就是他给我们指向了另一个地址，或者让我们无法访问。电信以前的互联星空的，每次联网打开的第一个网页永远是互联星空。就是典型的DNS劫持。
什么是http劫持:
百度百科的说法：HTTP劫持是在使用者与其目的网络服务所建立的专用数据通道中，监视特定数据信息，提示当满足设定的条件时，就会在正常的数据流中插入精心设计的网络数据报文，目的是让用户端程序解释“错误”的数据，并以弹出新窗口的形式在使用者界面展示宣传性广告或者直接显示某网站的内容。
通俗来说，你要去百度的首页，他会给你百度首页，然后再百度首页的某个部位＋个广告。 更具欺骗性，危害更大。
解决方案：
1.使用https请求替换http请求，可以有效的防止劫持。原理是：因为SSl协议唉http请求开始前增加了握手阶段：
在SSL握手阶段，客户端浏览器会认证服务器的身份，这是通过“证书”来实现的，证书由证书权威（CA）为某个域名签发，可以理解为网站的身份证件，客户端需要对这个证件进行认证，需要确定该证书是否属于目标网站并确认证书本身是否有效。最后在握手阶段，通信的双方还会协商出一个用于加密和解密的会话密钥。
SSL握手阶段结束之后，服务器和客户端使用协商出的会话密钥对交互的数据进行加密/解密操作，对于HTTP协议来说，就是将HTTP请求和应答经过加密之后再发送到网络上。
2.H5处理：
嵌入的代码基本都是iframe，把以下js代码加入 body标签内，以删除iframe（记得用script标签包裹）
//以下代码为删除嵌入广告
var del_times = 0, deTimer = null;
function adGo() {
var iframe = document.getElementsByTagName('iframe')[0];
if(iframe){
console.log(iframe)
//循环 iframe 父类，直到找到body和body的下一级，然后整个嵌入的代码删除。
var bodyNode = {tagName:''}, iframeParent, targetNode = iframe.parentNode;
while (bodyNode.tagName != 'BODY'){
bodyNode = targetNode;
if(bodyNode.tagName != 'BODY'){
iframeParent = targetNode;
targetNode = targetNode.parentNode;
}
}
if(iframeParent) //如果iframe有父类
bodyNode.removeChild(iframeParent);
else
bodyNode.removeChild(iframe);
}
del_times++;
if (del_times > 10) window.clearInterval(deTimer)
}
deTimer = self.setInterval(adGo, 1000); //把这个1000, 调低一点，比如200
网友评论