Sourcemap文件还原
0x00 前言
Sourcemap 是一个存储了代码转换前后位置信息的文件，通常是一个 JSON 文件，维护了原始代码和转换后代码之间的映射关系。Sourcemap 可以帮助开发者更容易地调试他们的代码，通过显示错误发生在原始代码中的位置，而不是转换后的代码中。
0x01 如何判断是否存在Sourcemap
- 查看js文件压缩版本最后一行看是否有类似以下代码
//@ sourceMappingURL=jquery.min.map
- webpack开启Sourcemap后，js文件加上
.map访问即可
https://www.soft98.top/static/app.132asc.js
https://www.soft98.top/static/app.132asc.js.map
0x02 如何逆向Sourcemap
- 网页打开开发者工具，在源代码的地方可以看到前端源代码
- 下载Sourcemap文件到本地，使用reverse-sourcemap工具逆向即可
# 全局安装reverse-sourcemap
npm install --global reverse-sourcemap
# 使用工具逆向，-v 后面跟的是下载的Sourcemap文件，-o 后面跟的是输出目录
reverse-sourcemap -v app.132asc.js.map -o app
0x03 如何下载Sourcemap
我写了一个JS代码下载当前网页的Sourcemap文件。
完整版代码：https://github.com/soft98-top/JSCodeSet/blob/main/WebpackSourcemapDownload.js
一句话代码：https://github.com/soft98-top/JSCodeSet/blob/main/WebPackSourcemapDownloadOneLine.js
目前仅支持对于webpack生成的形式，也就是文件加.map后缀的文件进行遍历获取下载，使用方法就是收藏任意网页，将网址内容改为一句话的代码，之后再想要下载的网站上进行点击即可。或者可以将完整版代码在控制台中执行。