发现Webpack中泄露的api

1 - 安装 reverse-sourcemap

需要配置好npm环境 （runoob教程）

使用命令（需要代理） npm install --global reverse-sourcemap 进行安装

2 - 寻找xxx.js.map

如果有sourcemap的话，在js最后会有注释：

//# sourceMappingURL=xxxxxxx.js.map

比如这里我要下载MarketSearch.js.map（MarketSearch.js是与站点同名的js，应该是主要的js文件）

• 在开发者工具中搜索.js.map （位置1）

• 找到MarketSearch.js.map所在的js （位置2）

• 找到对应的链URL（位置3）

• 一般来说，静态文件会挂载在当前域名下，但不排除其他站点挂载的情况，所以需要找到对应的URL，比如这里就不同站

• 这里MarketSearch.js的URL记为xxx.xxx/mulu/MarketSearch.js

3 - 下载xxx.js.map并获取所有webpack打包文件

4 - 使用IDE/其他编辑器寻找接口

4-1 搜索接口

4-1-1 借鉴先验请求的url

4-1-2 直接搜索

4-1-2-1 根据请求方法搜索接口

4-1-2-1 根据猜测命名规则搜索接口

5 - 寻找动态定义的接口

• key是键值，比如这里调用的是api.login，则key === login

• 对于每一个vse_share_1.Api定义的接口

• 如果传入的key与其中一个接口相同，且不为constructor（通过prototype原型读取，所以需要排除构造函数），则向下继续

• login传入__awaiter_

• 通过axios_1.default.post(`/${NAMESPACE}/${vse_share_1.ShareConfig.apiPrefix}/${key}`, args)发起请求

• 跟踪vse-share，寻找ShareConfig

• 查看命名空间的定义

• 跟踪../share

• ${NAMESPACE} === MarketSearch

• ${vse_share_1.ShareConfig.apiPrefix} === api

  ![image-20210417002455674.png](https://xzfile.aliyuncs.com/media/upload/picture/20210417205419-062b1358-9f7c-1.png)

• ${key} === login

• args === input，即，由ItemKey生成的json{username:"xxx",password:"xxx"}

福利视频

原文始发于微信公众号（迪哥讲事）：发现Webpack中泄露的api