Webpack源码映射文件(.js.map)泄露分析与API接口发现技术

1. 工具准备与安装

首先需要安装逆向分析工具 reverse-sourcemap：

npm install --global reverse-sourcemap

• 需要配置好npm环境
• 可能需要代理才能成功安装

2. 定位.js.map文件

2.1 查找sourcemap注释

在目标JavaScript文件中查找以下注释：

//# sourceMappingURL=xxxxxxx.js.map

例如：MarketSearch.js.map

2.2 搜索方法

1. 在开发者工具中搜索.js.map
2. 找到目标js文件对应的.map文件
3. 记录完整的URL路径（注意可能跨域存放）

3. 下载并逆向.js.map文件

3.1 下载文件

使用curl或直接访问：

curl -O http://xxx.xxx/mulu/MarketSearch.js.map

3.2 逆向源码

使用reverse-sourcemap工具：

reverse-sourcemap --output-dir ./MarketSearch MarketSearch.js.map

这将还原Webpack打包前的所有源代码文件。

4. API接口发现技术

4.1 基于已知URL的搜索方法

当已知部分API路径时（如/MarketSearch/api/login），可采用逐步删减策略搜索：

1. /MarketSearch/api/login
2. /api/login
3. /login

4.2 直接搜索方法

4.2.1 通过HTTP方法搜索

• 搜索关键词：get、post、put、delete
• 可发现动态定义的接口
• 可识别请求方法重写的代码

4.2.2 通过命名规则搜索

• 常见关键词：admin、superadmin、manage
• 根据站点名、API命名规则、JS文件名推测

5. 动态定义接口分析技术

动态接口通过拼接参数生成URL，增加了分析难度。分析示例：

// 动态接口调用示例
yield api_1.api.login(input)

5.1 动态接口组成

动态URL通常由以下部分拼接而成：

1. ${NAMESPACE} (如MarketSearch)
2. ${apiPrefix} (如api)
3. ${key} (接口名称，如login)

5.2 分析步骤

1. 跟踪api对象的定义路径
2. 查找Api类或相关配置的定义
3. 定位NAMESPACE和apiPrefix的配置位置
4. 分析请求发送逻辑（通常使用axios等HTTP库）

5.3 关键代码特征

// 典型动态接口实现
axios_1.default.post(`/${NAMESPACE}/${vse_share_1.ShareConfig.apiPrefix}/${key}`, args)

6. 实战技巧

1. 配置查找：搜索ShareConfig或类似配置对象，查找API前缀等关键信息
2. 原型链检查：注意排除constructor等原型方法
3. 请求跟踪：分析__awaiter等异步处理逻辑
4. 命名空间定位：查找../share等路径的配置文件
5. 表单数据处理：跟踪ItemKey生成的表单数据结构

7. 防御建议

1. 生产环境应移除.js.map文件
2. 使用代码混淆技术增加逆向难度
3. 避免在客户端存储敏感API信息
4. 实现完善的API访问控制机制
5. 对敏感接口增加二次验证

通过以上技术，安全研究人员可以有效地从Webpack打包的应用程序中发现潜在的API接口泄露风险，为安全评估提供重要依据。