JavaScript之webpack加密代码扣取
原文链接：app.yinxiang.com/fx/970ae39c… WebPack 概念：
webpack是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。所有的资源都是通过JavaScript渲染出来的。 识别：
基本结构：
第一种：
第二种：
多个JS文件打包：
如果模块比较多，就会将模块打包成JS文件, 然后定义一个全局变量 window["webpackJsonp"] = [ ]，它的作用是存储需要动态导入的模块，然后重写 window["webpackJsonp"] 数组的 push( ) 方法为 webpackJsonpCallback( ),也就是说 window["webpackJsonp"].push( ) 其实执行的是 webpackJsonpCallback( ),window["webpackJsonp"].push( )接收三个参数,第一个参数是模块的ID,第二个参数是 一个数组或者对象,里面定义大量的函数,第三个参数是要调用的函数(可选)。 每个JS模块文件开头都是类似这样的开头形式：
WebPack逆向：
WebPack的扣取思路：
1.首先找到加密参数函数入口,确定加密函数所在的模块。
JavaScript定位加密参数位置的方法
2.找到加载器函数。
示例：
3.在加载器函数中的call()方法或者apply()方法打上断点，将加密函数所在的模块和与其相关的模块一起扣取下来。
在有的webpack文件中，e或许是一个数组，n是模块名称。
4.将加密参数升为全局变量导出。
半自动扣webpack
原理：
webpack的调用类似于链式调用，一个接着一个,每次调用都要经过解析器，我们就可以在解析器中hook调用的代码，储存调用代码，然后打印出来。 实例：
- 找到加密参数函数入口,确定加密函数所在的模块。
2.找到加载器函数。
3.hook加密函数代码
hook函数为：
// 加载器函数d,加载器函数传入的参数n(也就是模块名称)
// 对象或者数组e(储存所有的模块)
window.web = d;
window._wbpk = n.toString()+":"+(e[n]+"")+ ",";
d = function(n){
window._wbpk = window._wbpk + n.toString()+":"+(e[n]+"")+ ",";
return window.web(n);
}
总结：
在加密函数(方法)和加密函数(方法)后打上两个断点，断点在加密函数(方法)断住后，追入到加载器函数,然后在加载器后面下断点(类似 return e[n].call(r.exports, r, r.exports, d) )，跳转到加载器后面的断点，在控制台输入HooK函数(根据不同的加载器函数改变HooK函数代码),取消加载器后面的断点,跳转到加密函数(方法)后的断点,在控制台输入window._wbpk
后得到所有与加密函数有关的模块代码。
4. 调用与改写
总结：
重写自执行函数 !function('形参'){'加载器函数'}(['扣取的模块']) 或者 !function('形参'){'加载器函数'}({'扣取的模
块'}) ，然后设置一个全局变量导出加密函数。
例子2：
注意：
1.一定要注意HooK时机(加密参数后，加载器函数中)。
2.一定要根据加载器函数来改写HooK函数的代码。
3.因为WebPack是链式调用模块，不可同时HooK多个加密函数，并且一定要在加密函数和加密函数后打上断点。
