前端页面劫持和反劫持

页面劫持

使用HTTP请求请求一个网站页面的时候，网络运营商会在正常的数据流中插入精心设计的网络数据报文，让客户端（通常是浏览器）展示“错误”的数据，通常是一些弹窗，宣传性广告或者直接显示某网站的内容。

常见劫持手段

跳转型劫持：

用户输入地址A，但是跳转到地址B

为了获取流量，一些电商或者类似百度这样需要流量合作的网站都会有自己的联盟系统，通过给予一些奖励来获取导流，比如：百度或者电商会有渠道分成。

为了区分哪些是第三方给予导流过来的，通常会在url地址增加类似source、from之类的参数，或者进入页面之前通过「中间页」种cookie。

这样，当用户输入一个正常网址的时候，劫持方会在网络层让其跳转到带分成或者渠道号的「中间页」或者带渠道号的页面。这样用户进行下单或者搜索等行为，劫持方会得到「佣金」。

DNS劫持：在DNS服务器中，将www.xxx.com的域名对应的IP地址进行了变化。你解析出来的域名对应的IP，在劫持前后不一样；

• 地址栏输入freebuf.com
• 访问本机的hosts文件，查找 freebuf.com 所对应的 IP，若找到，则访问该IP
• 若未找到，则进行这一步，去（远程的）DNS服务器上面找freebuf.com 的IP，访问该IP

中间人劫持就发生在第三步：由于恶意攻击者控制了你的网关，当你发送了一个查找freebuf.com的IP的请求的时候，中间人拦截住，并返回给你一个恶意网址的IP,你的浏览器就会把这个IP当做你想要访问的域名的IP!!这个IP是攻击者搭建的一个模仿了目标网站前端界面的界面，当你在该界面输入用户名密码或者付款操作的时候，就会中招。

注入型劫持：

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

1.注入js类劫持：
在正常页面注入劫持的js代码实现的劫持；注入js的方式可以通过 document.write或者直接改html代码片段等方式，给页面增加外链js，为了做到更难检测，有些运营商会捏造一个不存在的url地址，从而不被过滤或者检测。

案例1：运营商会用自己识别的ip或者域名做js网址，wap.zjtoolbar.10086.cn这类只有在浙江移动网络下才会被解析出来，同理ip也是

案例2：运营商很聪明，知道页面可以检测所有外链js的域名，比如：m.baidu.com我只允许m.baidu.com/static的外链js，其他js都会被记录反馈;为了不被检测出来，我遇见个case电信会访问一个不存在的地址，比如：m.baidu.com/static/abc.js，这个地址在运营商直接返回劫持的js代码，请求不会发到百度的服务器。

2.iframe类劫持：
将正常页面嵌入iframe或者页面增加iframe页面;一般是通过热门关键词之类做SEO，打开网站实际去了广告之类没有任何实际内容，而页面却是内嵌了一个其他网站，我们要是识别出来不被内嵌就需要检测。

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

HTTP劫持:标识HTTP连接。在天上飞的很多连接中，有许多种协议，第一步做的就是在TCP连接中，找出应用层采用了HTTP协议的连接，进行标识；篡改HTTP响应体，可以通过网关来获取数据包进行内容的篡改；抢先回包，将篡改后的数据包抢先正常站点返回的数据包先到达用户侧，这样后面正常的数据包在到达之后会被直接丢弃。

劫持检测方法

1、跳转型劫持

跳转型劫持如果用单纯靠Web页面进行检测比较困难，当时我们做检测是在手机百度(手百)内做检测，所以比较简单，用户输入搜索词(query)，打开百度的页面URL，然后当页面加载结束，APP对比访问的URL是否是之前要访问的URL，如果URL不一致，则记录上报。

2、注入js类页面

• 改写 document.write方法
• 遍历页面 script标签，给外链js增加白名单，不在白名单内js外链都上报
• 重写 Element.prototype.setAttribute，我们发现这里用到了 setAttribute 方法，如果我们能够改写这个原生方法，监听设置 src 属性时的值，通过黑名单或者白名单判断它，就可以判断该标签的合法性了。

MutationObserver 是 HTML5 新增的 API，功能很强大，给开发者们提供了一种能在某个范围内的 DOM 树发生变化时作出适当反应的能力。就是 MutationObserver 在观测时并非发现一个新元素就立即回调，而是将一个时间片段里出现的所有元素，一起传过来。所以在回调中我们需要进行批量处理。而且，其中的 callback 会在指定的 DOM 节点(目标节点)发生变化时被调用。在调用时,观察者对象会传给该函数两个参数，第一个参数是个包含了若干个 MutationRecord 对象的数组，第二个参数则是这个观察者对象本身。

var observer = new MutationObserver(function (mutations, observer) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

var article = document.querySelector('article');

var  options = {
  'childList': true,
  'attributes':true
} ;

observer.observe(article, options);

// 保存原有接口
var old_setAttribute = Element.prototype.setAttribute;
 
// 重写 setAttribute 接口
Element.prototype.setAttribute = function(name, value) {
 
  // 匹配到 <script src='xxx' > 类型
  if (this.tagName == 'SCRIPT' && /^src$/i.test(name)) {
    // 白名单匹配
    if (!whileListMatch(whiteList, value)) {
      console.log('拦截可疑模块:', value);
      return;
    }
  }
   
  // 调用原始接口
  old_setAttribute.apply(this, arguments);
};
 
// 建立白名单
var whiteList = [
'www.yy.com',
'res.cont.yy.com'
];
 
/**
 * [白名单匹配]
 * @param  {[Array]} whileList [白名单]
 * @param  {[String]} value    [需要验证的字符串]
 * @return {[Boolean]}         [false -- 验证不通过，true -- 验证通过]
 */
function whileListMatch(whileList, value) {
  var length = whileList.length,
  for (i = 0; i < length; i++) {
    // 建立白名单正则
    var reg = new RegExp(whiteList[i], 'i');
 
    // 存在白名单中，放行
    if (reg.test(value)) {
      return true;
    }
  }
  return false;
}

3、检测是否被iframe嵌套

window.self:返回一个指向当前 window 对象的引用。
window.top:返回窗口体系中的最顶层窗口的引用。

if (self != top) {
  // 我们的正常页面
  var url = location.href;
  // 父级页面重定向
  top.location = url;
}

4、特殊方法

前面提到类似电信捏造在白名单内的js URL和篡改页面内容的，我们用上面提到的方法检测不到这些信息，如果是在APP内，可以做的事情就比较多了，除了上面之外，还可以比较页面的 content-length。当时手百的做法是：

在用户开始输入query的时候，APP访问一个空白页面，页面内只有html、title、head、body、script，而script标签内主要代码就是嗅探是否被劫持。

因为一般劫持不会针对某个页面，而是针对整个网站域名，所以我们的空白页面也会被劫持。

劫持防御

最简单粗暴的就是直接上 HTTPS，一劳永逸。再就是取证，去打官司或者警告渠道作弊者。除此之外，我们还可以继续利用空白页面做劫持检测。

手百在没有全量https时期(毕竟全站https牵扯的工作量不小)，利用空白页面嗅探出当前网络环境存在劫持风险的时候，那么就通过调用客户端的接口，告诉客户端本次启动期间使用 https，这样既可以降低劫持风险，又可以通过这个页面小流量测试https数据，将来https全量后，还可以通过空白页面将老版本的APP全量打开https