在现代Web渗透测试中，前端代码往往是信息收集的“金矿”。随着SPA（单页应用）架构的普及，大量业务逻辑、API接口路径甚至敏感配置被打包进JavaScript文件中。掌握JS逆向与资产分析技术，能够帮助安全测试人员在不触发后端WAF的情况下，快速构建攻击面地图。
本文将深入探讨基于JS逆向的Web资产分析核心技术，涵盖接口提取、构建工具分析、源码恢复及主流框架特征识别。
1. JS接口提取
JavaScript文件中通常硬编码了后端API路径。高效提取这些接口是资产发现的第一步。
1.1 静态正则匹配
通过正则表达式匹配常见的URL模式，是最基础的手段。
- 相对路径：/api/v1/user, /admin/login
- 绝对路径：https://api.target.com/v2/data
- 动态拼接：`${baseUrl}/orders/${id}`
注意：需过滤掉CDN资源、第三方库引用及纯前端路由路径，避免误报。
1.2 动态AST分析
对于混淆或模板字符串拼接的接口，正则往往失效。利用抽象语法树（AST）进行语义分析更为精准：
- 使用@babel/parser 解析JS代码。
- 遍历CallExpression 节点，识别 get, fetch, $http 等请求函数。
- 提取第一个参数（URL）及第二个参数（Config）中的baseURL 进行拼接。
1.3 运行时Hook提取
当接口路径在运行时动态生成时，需通过浏览器Hook技术捕获：
- 重写prototype.open 和 fetch。
- 拦截createElement('script') 监控动态脚本加载。
- 结合无头浏览器（Puppeteer/Selenium）遍历页面交互，收集所有发出的请求。
2. Webpack源码分析
Webpack是目前最主流的前端构建工具，其打包产物具有显著特征，理解其机制有助于还原业务逻辑。
2.1 识别打包特征
Webpack打包文件通常包含以下特征：
- 全局变量：webpackJsonp, __webpack_require__, webpackChunk
- 模块映射：modules: { ... }或 chunks: { ... } 对象
- 入口标记：entry: ...或自执行函数包裹的模块数组
2.2 模块ID与依赖分析
Webpack将每个文件编译为一个模块，通过ID索引：
- 数字ID：早期版本常见，如0: function(module, exports, require) {...}
- 字符串ID：新版本或配置moduleIds: 'named' 后出现，如 "./src/api/user.js": function(...) {...}
技巧：若发现字符串ID，可直接通过文件名定位业务模块，大幅降低逆向难度。
2.3 Chunk拆分与懒加载
分析 __webpack_require__.e 或 import() 调用，可发现懒加载的Chunk文件。这些文件往往包含非首屏的关键业务接口（如支付、个人中心），是资产发现的盲区。
3. Source Map恢复源码
Source Map是开发环境的调试映射文件，若在生产环境未正确配置 .gitignore 或服务器策略，将导致源码泄露。
3.1 发现Source Map
- 文件头注释：检查JS文件末尾//# sourceMappingURL=xxx.js.map
- HTTP响应头：检查X-SourceMap 或 SourceMap 头
- 常见路径：尝试访问/static/js/main.js.map, /dist/main.js.map
3.2 源码还原工具
获取 .map 文件后，可使用以下工具恢复原始工程结构：
- reversesource：命令行工具，一键还原目录结构。
- source-map-visualization：可视化查看映射关系。
- Custom Script：解析sources 和 sourcesContent 字段，按路径写入本地文件。
3.3 安全价值
恢复源码后，可直接获得： - 完整的API路由定义 - 环境变量与密钥配置（.env 内容） - 未混淆的业务逻辑与注释 - 组件间的数据流转关系
4. Vue源码分析
Vue.js在打包后仍保留部分框架特征，可用于识别版本及提取路由/状态信息。
4.1 版本识别
- Vue 2：查找version, __VUE_DEVTOOLS_GLOBAL_HOOK__
- Vue 3：查找createApp, defineComponent, __VUE_OPTIONS_API__
4.2 路由表提取
Vue Router的配置通常在打包后以数组形式存在：
- 搜索path:, component:, children: 关键字。
- 关注meta 字段，常包含权限标识（如 requiresAuth: true）。
- 动态路由（/:id）可直接转化为Fuzzing字典。
4.3 Vuex/Pinia状态分析
状态管理库常存储敏感数据结构：
- 搜索mutations, actions, state 定义。
- 关注commit 和 dispatch 调用，可推断业务操作流。
- 部分开发者会将API请求封装在Action中，直接提取即可。
5. React打包分析
React应用通常配合React Router及状态管理库，其打包特征与Vue有所不同。
5.1 组件树识别
- 查找createElement, jsx, _jsx 等编译产物。
- 组件名在开发模式或配置displayName 后保留，如 UserProfile。
- Hooks调用：useState, useEffect的调用顺序可辅助理解组件生命周期。
5.2 React Router分析
- v5：搜索<Route path=, <Switch>。
- v6：搜索createBrowserRouter, element:, loader:。
- 注意：ReactRouter v6的 loader 函数常包含数据获取逻辑，是API提取的重点。
5.3 状态管理识别
- Redux：搜索createStore, combineReducers, useSelector。
- MobX：搜索makeObservable, @observable。
- Zustand/Jotai：搜索create(, atom(。
6. API接口枚举
基于前述分析，需对提取的接口进行系统化枚举与验证。
6.1 接口归一化
将提取的原始路径标准化：
- 去除BaseURL前缀，保留相对路径。
- 替换动态参数为占位符：/user/123→ /user/{id}。
- 合并重复路径，去重排序。
6.2 方法推断
JS代码中常隐含HTTP方法信息：
- get(url)→ GET
- post(url, data)→ POST
- fetch(url, { method: 'PUT' })→ PUT
- 无方法指定时，默认按GET/POST双测。
6.3 参数提取
从请求构造代码中提取参数名：
- Query参数：params: { page: 1, size: 20 }
- Body参数：data: { username, password }
- Header参数：headers: { 'X-Token': token }
6.4 自动化验证
生成接口清单后，结合以下工具进行存活与权限验证：
- Burp Suite：导入接口列表，使用Intruder进行参数Fuzz。
- Nuclei：编写自定义模板，批量检测未授权访问。
- Custom Script：基于提取的参数结构，自动生成合法请求进行基线测试。
核心原则：JS逆向不是目的，而是手段。所有提取的资产必须经过验证，避免将死链或前端路由误判为后端接口。
总结
基于JS逆向的Web资产分析，本质是将前端“黑盒”转化为“灰盒”的过程。通过系统化的接口提取、构建工具分析、源码恢复及框架特征识别，测试人员能够：
- 发现隐藏API与未授权端点
- 理解业务逻辑与数据流向
- 获取敏感配置与调试信息
- 构建精准的Fuzzing字典
在实际渗透中，建议将JS分析作为信息收集的标准SOP，结合动态调试与自动化脚本，最大化攻击面覆盖。同时，务必遵守授权范围，所有操作仅限于合法测试场景。
