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

123456879

简书网页劫持分析，浏览器指纹信息，使用 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