简书网页劫持分析，使用 Chrome DevTools 调试 JavaScript 技巧，利用 CSP

永远就三年疗

简书网页劫持分析，浏览器指纹信息，使用 Chrome DevTools 调试 JavaScript 技巧，Android Chrome 远程调试，使用 CSP 预防劫持


本作品没有已知的著作权限制。
本文可以随意转载，无需向我申请。有条件的话希望能注明原文链接，有任何标题可以回帖讨论。
择要

最近，每天第一次打开简书都会跳转到一个恶意网页，它以浏览器错误标题引导用户下载一个安装包。这个安装包安全性未知。别的打开网页时还会自动向剪贴板中写入一个淘口令，打开淘宝的时间会自动打开一个红包。页面跳转似乎是同一个 IP 每天只有第一次会触发，自动复制淘口令每次都会触发。别的，恶意网页的域名隔一段时间会更换。
经太过析得出，此标题正确来说不算是网页劫持，而是简书自己的一个广告供应商的标题。恶意代码是直接嵌入正常业务代码的，清除了被劫持的大概。由于已经持续很长一段时间了，所以说不定是简书默许了这个行为。此外，CSDN 似乎某些情况下也有这个标题（不确定）。
文章末端先容了使用 CSP (Content Security Policy) 预防页面劫持的方法。
关键词： 简书 劫持 网页 广告 恶意跳转 分析 DevTools 调试 JavaScript 指纹 Canvas Fingerprint CSP Cookie webpack
注意： 如果想知道如何劫持 HTTPS 网页的，抱歉这里没有，如今也不太大概出现 HTTPS 网页劫持或证书劫持的标题。
标题引出

最近（实在已经很长时间了），每天第一次打开简书都会跳转到一个恶意网页，它以浏览器错误标题引导用户下载一个安装包。这个安装包安全性未知。别的打开网页时还会自动向剪贴板中写入一个淘口令，打开淘宝的时间会自动打开一个红包。

页面跳转似乎是同一个 IP 每天只有第一次会触发，自动复制淘口令每次都会触发。
因为用电脑访问并不会出现任何标题，所以我曾经一度以为是我的手机中病毒了。iOS 也不会触发，他们似乎仅针对 Android 手机。
所以我就用电脑对网页的脚本分析了一下，这里把分析过程分享给大家。说白了就是内嵌了一段 js 脚本（不外里面能发现很多有趣的东西）。这篇文章的主要目的也是先容一些 JavaScript 的调试技巧。
目录

• 抓包
  
• 分析 js 代码依靠关系
  
• 格式化代码
  
• 分析代码逻辑与目的
  
• 为什么会出现这种标题
  
• 前端开发者如何预防这种标题
  
• 其他相关的思索与感想
  

抓包

打开 Chrome 浏览器，按 F12 打开 Chrome DevTools（Chrome 开发者工具），切换到 Network 标签中勾选 Preseve log，然后访问一个简书的网页。

网页是我在 Bing 上随便找到 site:jianshu.com - 国内版 Bing

等待页面加载完成。简朴浏览一下域名，看看有没有外部脚本。
似乎 PC 端不太行，谁人页面似乎只能在安卓端触发，这里采用一种方法模拟一下手机端。点击开发者工具左上角的手机图标，然后在网页上方多出的工具栏中选择一个 Android 机型，革新页面再看看。

这里有一个小技巧，右键列表的表头，勾选 Domain。然后按照域名排序，你就可以轻松忽略大量雷同域名的文件了。

我们似乎有不测发现，来自非简书的域名

卧槽！这么多奇奇怪怪名字的域名，一看就不是什么好东西。这得有多少使用简书的人被这帮恶意脚本 X 啊。
分析 js 代码依靠关系


我们可以看到文件是这样加载的

为了防止不必要的外链风险，文中所有的域名均使用下划线 _ 代替了点 .

https://www_jianshu_com/p/bc916e388452    https://cdn2_jianshu_io/asimov/2.c90dbb2ede007dc39cbf.js        https://ox86_xu7b_com/m301650.js            https://s9_cnzz_com/z_stat.php?id=1277879054&web_id=1277879054            https://ws2_hbssjd_cn/ms/a.js?b=200473!301650!88!640!150!200&u=5!5.0!0!1!c20tZzkwMHA%3D!8!77.0.3865.75!1&c=1!0!x!6!4!1!24!640!360!0!5!0!x!1!d2luMzI%3D!1!0!0!0!0!1!3!x!d3d3LmppYW5zaHUuY29t!1!1!1!R29vZ2xlSW5jLn5BTkdMRShJbnRlbChSKUhER3JhcGhpY3M0NjAwRGlyZWN0M0QxMXZzXzVfMHBzXzVfMCk%3D!12!1!1!1!42!56!-1!-1!2585131335&f=83338                https://s5_cnzz_com/z_stat.php?id=1277762915&web_id=1277762915                https://vi12x_xcle_cn/sucnew/640x150/20190909sg150.png        https://yun_lvehaisen_com/h5-mami/msdk/tmk.js            https://engine_tuistone_com/api/v1/activity/get4web?request_id=2NQi3x8zovefyJ6WYcB8c8K2L1Zz8Jn3Haz5vKiixtlv8Swe1574800139758&app_key=2NQi3x8zovefyJ6WYcB8c8K2L1Zz&slotId=304277&device_id=8Jn3Haz5vKiixtlv8Swe1574800139758&callback=jsonp_0020308437386842737            https://engine_tuistone_com/api/v1/activity/spm4web?slotId=304277&app_key=2NQi3x8zovefyJ6WYcB8c8K2L1Zz&device_id=8Jn3Haz5vKiixtlv8Swe1574800139758&activity_id=2000017418%2C923%2C923&sdk_type=JSSDK&sdk_version=3.3.1&sdk_source=jianshu.com&type=0&click_url=https%3A%2F%2Factivity.tuipear.com%2Factivity%2Findex%3Fid%3D17418%26slotId%3D304277%26login%3Dnormal%26appKey%3D2NQi3x8zovefyJ6WYcB8c8K2L1Zz%26deviceId%3D8Jn3Haz5vKiixtlv8Swe1574800139758%26dsm%3D1.304277.0.0%26dsm2%3D1.304277.2.17418%26tenter%3DSOW%26subActivityWay%3D48%26tck_rid_6c8%3D0acc3777k3fjua4n-4603223%26tck_loc_c5d%3Dtactivity-17418%26dcm%3D401.304277.0.923%26&data1=0acc3777k3fjua4n-4603223&data2=%7B%22clickUrl%22%3A%22%2Factivity%2Findex%3Fid%3D17418%26slotId%3D304277%26login%3Dnormal%26appKey%3D2NQi3x8zovefyJ6WYcB8c8K2L1Zz%26deviceId%3D8Jn3Haz5vKiixtlv8Swe1574800139758%26dsm%3D1.304277.0.0%26dsm2%3D1.304277.2.17418%22%2C%22materJson%22%3A%22%7B%5C%22content%5C%22%3A%5C%22%5B%7B%5C%5C%5C%22imageUrl%5C%5C%5C%22%3A%5C%5C%5C%22%2F%2Fyun.tuitiger.com%2Fmami-media%2Fimg%2Fqm1eti6pdn.gif%5C%5C%5C%22%2C%5C%5C%5C%22width%5C%5C%5C%22%3A150%2C%5C%5C%5C%22height%5C%5C%5C%22%3A150%2C%5C%5C%5C%22msItemId%5C%5C%5C%22%3A22%7D%5D%5C%22%2C%5C%22gmtCreate%5C%22%3A1503470517000%2C%5C%22gmtModified%5C%22%3A1565093474000%2C%5C%22id%5C%22%3A923%2C%5C%22md5%5C%22%3A%5C%22DVt9EZ6wUcKxAg6mAseK8n%5C%22%2C%5C%22msId%5C%22%3A22%2C%5C%22pictureGroup%5C%22%3A%5C%224%5C%22%2C%5C%22pictureSize%5C%22%3A21%2C%5C%22pictureType%5C%22%3A%5C%220%5C%22%2C%5C%22pictureVal%5C%22%3A%5C%22150*150%5C%22%2C%5C%22title%5C%22%3A%5C%22%E6%91%87%E4%B8%80%E6%91%87%5C%22%7D%22%2C%22materialId%22%3A923%2C%22sckFromType%22%3A%22null%22%2C%22sckId%22%3A923%7D&refer_host=www.jianshu.com&md=×tamp=&nonce=&signature=&connect_type=undefined&callback=jsonp_039959120667317904            https://yun_tuitiger_com/mami-media/img/qm1eti6pdn.gif万恶之源都是这个 2.c90dbb2ede007dc39cbf.js，它加载了 m301650.js 和 tmk.js 这两个文件，似乎 tmk.js 是用来加载页面右下角的广告的。而另一个就是跳转到骗人下载安装包谁人页面。

这个 m301650.js 接入 cnzz 站长统计，看来访问量不小，都需要分析访客来源了。说不定分析之后还要针对性投放浏览器恶意下载页面呢。
分析代码

然后就是分析代码的目的了。

这种明知道被 X 了，却不知道对面在做什么的感觉很难受。我非得把它扒的一干二净不可。

我们需要分析一下 m301650.js a.js tmk.js 这三个文件，如果有需要的话也可以分析一下 2.c90dbb2ede007dc39cbf.js，看看恶意代码是怎样嵌入到项目主代码中的。
火线高能！想学技术的仔细瞧，吃瓜群众凑个热闹就行了。
格式化代码

右键选择 Open in Sources panel。

点击代码编辑器左下角的格式化代码按钮。

尝试分析代码

然而事情并没有那么简朴，简朴浏览一下就会发现，这里有很多加密后的常量，还有疑似的解码算法。

解密字符串

这里有很多种方法，下断点是最容易的，依靠于 Chrome 强大的调试功能，轻松就能找到解密函数。

动态调试每每比静态分析要简朴。动态调试你能获取到程序运行时的第一手资料，静态调试只能靠一层层的推断。不外动态调试大概被检测出来，静态调试则没有这个标题。

方法 1：下断点调试

• 先在被混淆函数 d 那一行下一个断点
  
• 革新页面，重新执行一次这个函数，触发断点
  
• 直接在控制台输入被混淆的函数名 d，然后回车，调试工具会直接输出当前上下文环境中的 d 的值。
  

这样我们很容易就能找到这个解密代码。
方法 2：尝试搜索所有动态语句

如果我们直接找不到某个变量或函数名，那么他应该是动态生成的。

• 搜索 eval, new Function 动态执行语句
  
• 查找 String.fromCharCode, String.charAt 等大概动态生成标识符的函数
  

先搜索 eval，这种加密固然最简朴，但对于大多数不懂的人也是充足有效的。

二八定律到处存在，大概这个加密只是最简朴的那 20% 的加密方法，但他却能阻止 80% 的人破解代码。（比例不一定对，但是这种现象是经常存在的）

m301650.js 中只有一处 eval
eval(function(p, a, c, k, e, d) {    e = function(c) {        return c.toString(36)    };    if (!''.replace(/^/, String)) {        while (c--) {            d[c.toString(a)] = k[c] || c.toString(a)        }        k = [function(e) {            return d[e]        }];        e = function() {            return '\\w+'        };        c = 1    };    while (c--) {        if (k[c]) {            p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c])        }    }    return p}('6 d(b){5 a,c="";4(a=0;a