防运营商劫持代码

一、什么是运营商劫

什么是运营商:

运营商是指那些提供宽带服务的ISP,包括三大运营商中国电信、中国移动、中国联通,还有一些小运营商,比如长城宽带、歌华有线宽带。运营商提供最最基础的网络服务,掌握着通往用户物理大门的钥匙,目前运营商劫持很普遍。

举个劫持的栗子:

劫持方式:

运营商比较常见的作恶方式有三种,分别是DNS劫持、HTTP劫持、HTTPS劫持:

DNS劫持:这种劫持会把你重新定位到其它网站,我们所熟悉的钓鱼网站就是这个原理。但是因为它的违法性,现在被严厉的监管起来,已经很少见。

HTTP劫持:虽然DNS劫持已经被监管了起来,但是还有HTTP劫持啊!你DNS解析的域名的IP地址不变,当运营商发现你的是HTTP请求时,就会在里面插入一些奇奇怪怪的广告(比如一些banner、浮标、更有甚把你你的商品位给劫持了 WTF...)并且这种现象十分常见,不信你可以试着随便打开一个网页,仔细看看你就会发现一些小尾巴,这就是被HTTP劫持了。

HTTPS劫持:安全的超文本传输协议,数据加密这也能劫持?答案是肯定的!该劫持方式有两种:

  1. 伪造证书,通过病毒或者其他方式将伪造证书的根证书安装在用户系统中(较少)
  2. 代理也有客户的证书与私钥,或者客户端与代理认证的时候不校验合法性,即可通过代理来与我们服务端进行数据交互(较多)

备注:使用本篇的代码一定会让你查到HTTPS劫持的(前提是使用了https)

二、防运营商劫持

准确的来说是防script、iframe注入型劫持,95%以上是这种劫持方式,因为DNS劫持被严管了。

运营商是如何劫持的,网上有很多资料,这里不多逼逼

下面是防劫持代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>防劫持代码测试</title>
  <script>
    console.log('发生劫持,初始化就直接置顶的流氓行为,暂无法防御,但可以通过埋点记录LOG,向工信部投诉!!');
  </script>
  <!-- 防劫持 -->
  <script shendun-eddy>
    /**
     * @note 防劫持代码
     * @key MutationObserver 提供了监视对DOM树所做更改的能力 
     */
    (function() {
      var srcFilterTags = ['script', 'iframe'];
      // 域名白名单 可以加多个
      var whiteList = ['zeptojs.com'];
      var whiteListReg = [];

      // 正则匹配
      whiteList.forEach(function(wl) {
        var wlReg = new RegExp('/.+?\/\/' + wl + '|\/\/' + wl + '|.+?\.' + wl + '|^' + wl);
        whiteListReg.push(wlReg);
      });
      // 白名单助手
      var inWhileList = function(addedNode) {
        // shendun-eddy 是script的白名单标签
        if (addedNode.src === '' && addedNode.getAttribute('shendun-eddy') !== null) {
          return true;
        }

        var isInWhiteList = false;

        whiteListReg.forEach(function(wlReg) {
          if (wlReg.test(addedNode.src)) {
            isInWhiteList = true;
            return false;
          }
        });

        return isInWhiteList;
      };

      // dom观察器
      var mutationHandler = function(records) {
        records.forEach(function(record) {
          Array.prototype.slice.call(record.addedNodes).forEach(function(addedNode) {
            srcFilterTags.forEach(function(tagName) {
              // 标签匹配 白名单匹配
              if (addedNode.tagName === tagName.toUpperCase() && !inWhileList(addedNode)) {
                addedNode.remove();
              };
            });
          });
        })
      };

      // 核心 - MutationObserver 提供了监视对DOM树所做更改的能力
      // 优点 - 动态监听是否有非法的 iframe 和 script 代码
      // 缺点 - 无法查找头部直接插入的代码
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
        observeMutationSupport = !!MutationObserver;
      var html = document.getElementsByTagName('html')[0];

      if (observeMutationSupport) {
        new MutationObserver(mutationHandler).observe(html, {
          'childList': true,
          'subtree': true
        });
      }

      // 唯独直接加载的不能remove掉,异步加载的都能remove掉!!
      // ***  记录头部的script,通知工信部 ***
      var eleList = document.querySelectorAll('script');
      var len = eleList.length;
      for (var i = 0; i < len; i++) {
        // 遍历操作
        if (!inWhileList(eleList[i])) {
          // do sth 这里的删除虽然已经晚了,因为头部同步JS已被执行,删除操作意义不大,但可以统计被劫持的代码是什么,记录好LOG 通知工信部
          // sendLog
          eleList[i].remove();
        }
      }
    })();
  </script>
  <script>console.log("劫持1");</script>
</head>
<body>
  <div>防劫持代码测试</div>
  <div class="father">
    <div class="bro">
      <div class="xiongdei">
        <script src="https://mt.cnzz.com/js/hdpi_canvas.js"></script>
      </div>
    </div>
  </div>
  <script src="http://zeptojs.com/zepto.min.js"></script>
  <!-- 这里执行了 console.log('哎哟,我来劫持你了...'); 虽然访问了这个script, 但被remove了不会执行-->
  <script src="http://yun.dui88.com/qiho-h5/jqg/shendun_test.js"></script>
  <script>console.log("劫持....");</script>
</body>
</html>

加入运营商劫持代码后,不在白名单和安全标签(shendun-eddy)内的script或者iframe都会被remove掉。

提示:network内能看到加载了其他非白名单内的script代码,但它们都没有执行

yun.dui88.com/qiho-h5/jqg… 为例,代码如下:

;(function(){
  console.log('哎哟,我来劫持你了...');
})()
复制代码

核心功能

MutationObserver()创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

具体参数和用法传送门:developer.mozilla.org/zh-CN/docs/…

兼容性

所有浏览器的兼容性是92.79%,手机端的兼容性更高,代码中加了保护所以放心使用吧!

三、总结

目前运营商劫持率大约是3% ~ 25%,它们无处不在。

为了还用户一个干净安全的浏览环境,我们需要做好预防措施

  1. 全站https,能防一部分
  2. 加入防运营商劫持代码,能防大部分注入型劫持
  3. 记录Log,记录证据,向工信部投诉

很实用,拿过来以便备用,转载自掘金https://juejin.im/post/5bea7eb4f265da612859a9e4

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python中文社区

Python 3.6实现单博主微博文本、图片及热评爬取

文章简介 经常刷微博的同学肯定会关注一些有比较意思的博主,看看他们发的文字、图片、视频和底下评论,但时间一长,可能因为各种各样的原因,等你想去翻看某个博主的某...

6086
来自专栏coding

这一次,真正掌握composercomposer是现代PHP的基石初识composercomposer包管理规范

现代高级编程语言,依赖管理工具是必不可少的。Java有Maven,Python有pip,Nodejs有npm, 而在composer出现之前,PHP只有被广为诟...

2012
来自专栏HaHack

comment.js:一个纯JS实现的静态站点评论系统

2424
来自专栏hadoop学习笔记

菜鸟如何使用hanlp做分词的过程记录

最近在学习hanlp的内容,准备在节后看看有没有时间整理一波hanlp分享下,应该还是会像之前分享DKHadoop一样的方式吧。把整个学习的过程中截图在配文字的...

1284
来自专栏鹅厂优文

鹅厂优文 | 企点PC端性能测试-UI卡顿分析

本文以一个企点融合工作台测试中发现的案例说明如何获得UI卡顿数据,以及如何分析数据,定位问题。

1.1K12
来自专栏VMCloud

【解析向】腾讯云的Windows Server日志配置收集工具是个什么鬼?(5)

且听笔者一句劝,无论是Windows还是Linux抑或是Unix都是大部分理论是相同的,与其与人争吵对比这几个平台之类的差异,不如好好研究下底层的各个子系统...

2527
来自专栏V站

图片API丨V站二次元随机图片API(自判断)

①于2018.03.31公布,采用高速服务器运行! ②PC版随机图片拥有200+张,PE版拥有100+张超精美二次元风随机图片,每星期一更! ③全程免费,欢迎支...

3.9K10
来自专栏达摩兵的技术空间

app中的webview通识篇(上)

如果你还是第一次与app合作开发webview的页面,那么对于如何调试,可能有哪些问题可能是不够了解的。本文尝试性的根据自己的经验给大家一个入门级别的了解,如果...

5642
来自专栏哲学驱动设计

“秒杀”心得

    本文记录对某网站A的秒杀活动编写秒杀器的经历和技术重点。 故事回顾     某日早上,朋友给我说最近A网站在开展秒杀活动,有IPad、IPhone,让大...

3088
来自专栏欧阳大哥的轮子

论MVVM伪框架结构和MVC中M的实现机制

一直都有人撰文吹捧MVVM应用开发框架,文章把MVVM说的天花乱坠并且批评包括iOS和android所用的MVC经典框架。这篇文章就是想给那些捧臭脚的人们泼泼冷...

963

扫码关注云+社区

领取腾讯云代金券