22-webpack案例：36kr

本文我们做一个webpack案例，学习网站：webpack：36kr

定位加密位置

这里我们逆向的是登录接口，先找到登陆页面，然后选择账号密码登录，然后抓到数据包，通过xhr断点断下来：

入参中有我们的加密参数及密文，那我们往上跟栈，先看最后一个栈：

没有的话就先往后面的栈找，二分找：

这里网上找肯定是有线索的，因为最后执行的那一个栈有密文啊，这里算是个人总结的小技巧，往后面的栈（后执行的栈）跟，发现这里有加密参数：

入参加密那就往前面栈跟：

入参还有继续向前，然后跟了一辈子发现：

竟然藏在这个函数内部，因为这个函数有password（加密参数）赋值操作引起注意，这种一定要看一下，找到加密位置就打上断点，重新触发然后分析代码吧：

内部参数是明文，看看经过函数之后变成什么：

次次不同，这里就是加密位置了，进函数分析：

这里我们不进行确定了，直接扣核心代码

扣代码+补环境

扣完再根据报错来补就行：

进n函数给n函数扣下进来：

再补c：

一看c吓一跳，几千个函数，这一个一个补直接炸缸，小逝，这里有这个：

再看一眼这个js文件的整体逻辑：

再结合我们刚看到的标志，这里就是一个webpack加载器，而且是模块单独打包的webpack，咱直接把这个文件全复制下来，将之前的n函数覆盖掉，n就是webpack加载器，已经在我们复制的代码里面了，之后代码大体就是这样：

运行一下：

报错window不存在，js代码一般会有环境监测，不在浏览器的话没办法运行，node的环境与浏览器有些区别但是区别不大，咱可以写一句这样的代码：

将window赋值为node中的环境，再运行：

n函数又没了，刚复制的整段代码不补的有么？ok，这就是作用域的问题了，n函数再自执行函数的内部而调用在外部，这时候我们就要再全局写一个变量来赋值成n，将函数拿到全局，具体过程：

1.设置全局变量

2.赋值并更改函数名

再运行：

这个报错是因为没有模块给其调用，咱扣的核心代码中有：

需要431模块，但我们怎么去找呢，之前我们说过自执行函数的形参中有所有的模块，这里的形参是e，ok，那你看看这里有个什么：

这里的n.m里面存的其实就是所有的模块，我们可以通过n.m[xxx]的的方式在控制台定位函数：

接下来给他拿过来放进自执行函数的后面括号中作为模块，这里我们用类似py中的字典取值那种来调用：

接着运行补上i（密钥）和要加密的数据即可加密了：

补充

这个案例拿出来一个模块就成了，那我们要是需要多个模块怎么办，我们根本不知道缺了哪个模块，这时候就在这里加上这样一行代码：

这样就知道缺什么模块了

还有就是这里的a方法调用可以注释掉，a方法是函数webpack的入口，我们其实不需要：

这个无所谓

小结

本文到此就结束了，webpack主要流程再总结一下吧：

• 先判断是不是webpack（判断方法：将核心代码拿下来运行，当报错的函数进去之后看到这一行代码：return e[t].call(a.exports, a, a.exports, n)那就是webpack）
• 进去的函数就是加载器的位置，将整个文件复制粘贴下来（可以将webpack入口注释掉）
• 写一个外部变量将加载器导出到全局，然后替换核心代码的那个函数
• 写上需要的模块那行代码，查看缺少的模块，定位到后复制粘贴
• 再执行代码按报错补环境

本文若有什么问题，及时提出，交流学习，加油加油