JS逆向-WebPack

​ 纸老虎,看着挺多挺唬人,其实很简单,麻烦一点,要耐心。

Webpack 识别

​ 是一个javascript静态打包工具,他的作用是将js代码进行分割,模块化,提高js的加载效率。

​ 下面是webpack的特征:

1
2
3
4
5
6
7
8
//文件开头存明显的webpack字样
(this.webpackJsonp = this.webpackJsonp || []).push([["chunk-83ba"], {xxx}
//文件开头为自执行函数
!function(xxx){xxx}
(function(xxx){xxx})
//存在大量闭包函数
"xxxx1": function(xxx){xxxx},
"xxxx2": function(xxx){xxxx}

​ Webpack使用闭包函数都会用到加载器,下面来讲一讲加载器长什么样:

1
2
3
4
5
!function(e) {...}([...]);
//!function("形参"){"加载器"}(["模块"]);

//1.自执行函数 !让引擎识别为函数表达式,而不是函数声明,其中形参e就是最后括号里的内容。
//2.其中模块有多种形式,可以是数组格式,可以是json格式(键值对)。其中每个元素都是一个函数。

​ 再写一个更为详细的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
!function(e){
//存放加载器
var c = {};

function n(t) {
var a = c[t] = {
i:t,
l:!1,
exports: {}
};
console.log(a);
return e[t].call(a.exports, a, a.exports, n),
a.l = 0,
a.exports
}

n.m = e;
//入口函数
n(2);
}([
function(){
console.log("初始化模块");
},
function(){
console.log("加密模块");
},
function(){
console.log("解密模块");
}
])

如何逆向Webpack代码?

​ 逆向webpack代码的痛点在于,代码执行流程不清晰,webpack将模块包装在闭包中,模块间复杂的函数依赖。解决上述问题就需要:

  • 找到需要导出的函数
  • 找到加载器
  • 找到模块存放及其嵌套依赖

​ 上面写的例子就比较简单了,代码执行流程比较容易分析,真实情况可能是,存在多个JS文件,每个JS文件中都有很多个模块,加载器不一定只在存在于模块上方。

​ 找到加载器和模块后,按照加载器加载模块,将需要用到的模块填入传参中,再用一个变量将加载器导出,就能直接调用函数链了。

例子

网址

https://synconhub.coscoshipping.com/

用到的工具环境:

IDE: WebStorm (方便折叠代码,vscode、notepad++、notepadNext都可以)
浏览器:Chrome Devtools

登录页参数加密

​ 这里看到传入的密码是加密的,打断点进行调试,最终找到加密是在app.939ea5e9.js中“MuMZ”模块中的r函数。找到我们的目标函数了。

目标函数位置

​ 接下来找加载器位置,往上翻一翻,根据前人的经验,遇到xxx.m就可能是加载器了,直接去看c。

寻找加载器

​ 就是这个,是不是很像一开始的例子。

加载器

把整个代码复制出来,折叠一下,就一目了然了。

折叠代码

​ 删减代码,然后尝试加载所需的模块,存在报错,在加载器中加一段调试代码,看看缺少哪些模块。

调试所需模块

​ 这样就能知道,问题出在哪里。

调试所需模块

​ 补了一共51个模块,不报错了,最后查看一下模块内部的导出名,是b,运行一下,没报错。

本地化webpack