WEB前端逆向在nodejs环境中复用webpack代码

☆ 背景介绍

WEB前端逆向中会遭遇webpack处理过的js代码，这种代码不是给人类阅读的，所以没什么可读性。有些生成关键字段的函数位于其中，不想调试分析算法逻辑，想视之为黑盒函数，给in，返回out；想在nodejs环境中复用本来在browser环境中运行的webpack代码；此过程俗称「webpack代码抠取」。

这事没有真正意义上的技术门槛，但绝大多数讲抠取的文章写得不合我意，故有此篇科普。

简单点说，webpack是一种工具，可将本来在nodejs环境中运行的js处理一下，生成可在browser环境中运行的js。对WEB前端逆向人员，没必要往更复杂理解。学习思路如下

a. 写一套nodejs中可用的测试用例
b. 正向应用webpack技术，从a中js得到新的带符号信息的js
c. 编写HTML，在browser中使用b中js
d. F12调试，了解webpack框架流程
e. 正向应用webpack技术，从a中js得到新的strip过的js，接近现实世界案例
f. 针对e中js进行逆向工程，从中抠取webpack代码，得到新的js
g. 在nodejs中加载f中js，调用其中感兴趣的函数，得到返回值

按此思路学习，可从原理上真正理解「webpack代码抠取」。

☆ 小结

「webpack代码抠取」基本过程

a. F12调试跟踪至目标模块中某函数，欲抠取
b. 识别出目标模块的模块函数，识别模块入口、出口
c. 通过模块入口第三形参定位__webpack_require__()
d. 下载webpack运行时所在js，修改，全局导出__webpack_require__()
e. 下载目标模块所在chunk，精简，只留目标模块
f. 半自动抠取目标模块的依赖模块，补充到e中chunk
g. 编写run_webpack_code.js，加载webpack运行时，加载f中chunk，调用目标函数

步骤d、e可能是同一个js。步骤g可能需要二次补依赖模块。

有一些傻瓜化工具用于webpack抠取，不好这口，略过。

webpack抠取多用于黑灰产，实在想不出正经人为什么有这种需求？本文仅为逆向工程技术探讨，无意招麻烦，无现实世界完整示例，但相关技术全部提供，无保留，照猫画虎可实操。