chrome devtool调试分析网页js加密逻辑实例

本文介绍一次利用chome浏览器的devtool工具分析网页js加密的实例过程。

一. 实例网站

本实例的网站是中国空气质量分析平台https://www.aqistudy.cn/html/city_detail.html

二. 分析页面逻辑

1. 抓包分析

用chrome打开该网页，然后按F12打开开发者工具devtool，点击切换到“network”标签页。为了方便查看，先清除之前的请求过程，然后在网页上切换城市，即可看到新的xhr请求。

请求内容

请求响应

可以看到请求的内容和响应都是经过加密处理的。

2. 调试分析

因为刚刚的网络请求是在点击切换城市之后发生的，所以可以利用click断点来调试。
在devtool中，切换到“source”标签页，打开“Event Listerner Breakpoints >> Mouse”，选中click选项即可。

click断点

然后在页面上点击触发网络请求，页面便会执行到某个断点处暂停，此时便可以利用调试模块上的工具进行调试。
chrome devtool调试的基本使用可参考文章
https://developers.google.com/web/tools/chrome-devtools/javascript/

3. 网页逻辑分析

经过一步一步地调试跟踪之后，可以发现执行到了city_detail.html中的getData()方法。在devtool的console窗口中执行getData()，发现触发了网络请求，所以可以确认网络请求过程在这个方法里面。
进入getData()进一步调试，最终发现ajax请求在getServerData()方法里。为了混淆，该方法被放到了jqury-1.8.0.min.js?v=1.2文件中，而且经过混淆处理，可以利用在线工具来反混淆，如https://beautifier.io/
分析getServerData()方法，发现ajax请求前有个getParam()方法跟参数加密有关，并且在ajax的回调方法中发现了decodeData()方法跟响应的解密有关。

三. 模拟请求过程

利用断点调试获取请求过程中的参数method, param，然后在getParam（）方法中console窗口中手动执行

var test_param = getParam(method, param);
test_param

发现该值和加密的请求参数一致，所以可以确认请求参数经过getParam()方法加密。
在console中调用ajax请求

var responsedata;
$.ajax({url:'../apinew/aqistudyapi.php', data:{d:test_param}}, type: 'post', success: function(data){responsedata = data});
responsedata

发现responsedata即为加密后的响应。再执行

decode(responsedata)

即可成功解密。
至于具体的加解密方法，则可以在上述方法里做进一步分析，这里不再深入。