type
status
date
slug
summary
tags
category
icon
password
大家好,这里猿榜编程逆向专题,我要来给大家水文了。
📝 主旨内容
目标网站
网站:某点点排行榜
网址:aHR0cHM6Ly9hcHAuZGlhbmRpYW4uY29tLw==
webpack简单介绍
Webpack 是一个现代 JavaScript 模块打包工具,支持多种模块化标准(如 ES6、CommonJS),通过加载器和插件机制处理各种类型的文件,实现代码分割、热模块替换等功能。其打包代码通常以自执行函数形式封装,模块存储为数组或对象,通过加载器(如__webpack_require__
)动态调用,具备结构清晰、全局污染小的特点。
- 代码混淆与压缩:打包后变量名和函数名会被混淆,代码格式被压缩,增加理解难度。
- 模块依赖复杂:模块之间的嵌套调用和依赖链变得不直观,需要逐层分析加载逻辑。
- 动态生成逻辑:部分代码通过动态生成或执行,需模拟运行环境才能还原其功能。
- 加载器逻辑复杂:Webpack 的模块加载器封装度高,初次接触难以快速掌握其行为。
- 环境依赖:某些关键模块依赖浏览器环境的对象(如
window
、navigator
),在非浏览器环境运行时需手动模拟。
定位分析
首先我们今天通过请求测试,发现需要分析的是k这个参数,才可以正常得到结果。

首先还是一样找到对应生成的地方,这里我们还是一样先从堆栈查看,查看能否找到比较好的定位点。

在这里的堆栈我们不难看出,这里的request这个字眼很显眼,这里代表的是请求的意思,我们找到对应的内容,点击后跳转到对应的位置。

这里我们看到很多异步信息,其实这个特征很喜欢在webpack这种打包模式下出现,这里我们先观察一下代码。

这里我们不难看出,他有一个很明显的特征就是(数字:函数)都是以这种形式去定义的。这种就是我们所说的webpack,我们可以看到很明显的特征如下:
webpack的典型特征:
- 模块定义方式:使用(数字:函数)的独特形式来定义和组织代码
- 加载器机制:通过专门的加载器(如__webpack_require__)来动态调用模块
- 异步特性:代码中常见异步加载的信息特征
- 代码保护:通过混淆和压缩来保护源代码,使变量名和函数名难以理解
- 环境依赖:部分模块需要浏览器环境对象(如window、navigator)才能正常运行
所以我们需要找到他的加载器,从而来实现把所需要的参数来进行加载,这样具体怎么解决这个webpack我们已经知道了,接下来我们需要就是找到对应的加密生成位置。
从刚刚的m这个变量我们可以看到他其实包含了很多的函数,是一个列表。

这些其实就是后续一个一个去执行,通过调试我们也可以知道跳过这个部分他K就会生成完毕,所以可以确定是在这里生成的,如果我们刚开始不知道我们就把所有的断点打上然后一个一个去跟。我这里就直接说是在哪里了。
最后其实就是在这个onRequest函数去实现的。

然后我们可以通过这个去调试跟进,我们发现最后生出来的是这个位置。

通过这几个参数传入然后取生成的。所有我们重点是要模拟这段代码。
现在知道了这些代码接下来就是要把所需要的代码扣下来,然后去补环境去执行就可以了。
扣代码
我们先把最开始的这些代码全部复制出来。

然后找到他的加载器,加载器其实也很容易找,他这个n(数字)这里的n就是他的一部分加载器,我们需要的是把这部分代码拿下来,然后对稍微改造一下即可。

就是这一个部分,然后再复制到我们本地的文件中。

然后再定义一个变量,把这个加载器导出来。

然后再自调用函数把这些webpack的每一个函数分钟在这里

接下来就是运行你需要的那个函数

然后就是少了哪些函数你就去复制哪一些下来,假如现在少了数字233对应的函数

就像这样然后双击到对应的函数免备案整个函数复制下来,然后再继续拼接到刚刚那个大的数组的对象中。复制完大概有6w+代码把,建议不要用ide顶不住,哈哈哈。

补环境
补环境介绍:在JS逆向过程中,补环境是指模拟浏览器运行环境的过程。由于某些JavaScript代码依赖特定的浏览器API和对象(如window、document、navigator等),在非浏览器环境下分析时需要手动实现这些对象和接口,以确保代码能够正常执行。
首先我们把上面哪些函数补充完之后就会提示少环境了,这时候就需要补环境了,他这里还挺好的少了什么基本上会报错误,你就定义一个让他可以拿到就行。

一直补。。。
一直补。。。

还不算很多这环境。这样就可以运行成功了。

验证我们计算的结果。
写个模拟请求,把我们的计算结果复制一下。然后在请求。

🤗 总结归纳
本文介绍了如何解决一个基于webpack打包的网站的JS逆向问题。主要内容包括:
- 分析目标:某点点排行榜网站的k参数生成逻辑
- 解决思路:
- 通过堆栈定位到关键request位置
- 识别webpack特征并找到模块加载器
- 定位到onRequest函数中的参数生成逻辑
- 具体步骤:
- 提取webpack相关代码和加载器
- 补充必要的浏览器环境
- 验证参数生成结果
通过这个案例,展示了处理webpack打包代码的基本方法,包括代码定位、环境模拟和参数还原的完整过程。
- 作者:猿榜编程
- 链接:https://www.yuanbang.lol//article/158202ba-3e23-807c-b627-c35ac9e46ff6
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。