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 许可协议，转载请注明出处。