现在许多网站都使用webpack对网站打包，许多前端框架也默认配置好webpack。这会在渗透测试或挖洞过程中带来一些麻烦。这让我们极其痛苦。但是开发者忽视起潜在风险，在线上环境使用了开发环境的配置，或者配置了sourcemap允许在生产环境中使用。这使得我们有了机会。
在实际渗透过程中，许多网站还是存在这种情况。通常一般是配置了devtool: 'source-map' 。
我们可以在js的文件名后面加上.map，如果在这种该文件，我们则可以通过工具解压缩webpack。
或者当我们一般看到类似这样的代码时，也基本可以对其进行解压缩。
利用
可以使用的工具有：
1. SourceDetector
地址：https://github.com/SunHuawei/SourceDetector
这个工具是chrome浏览器的插件，gogole商店中没有该插件，需要自己编译，这里遇到些坑，给大家说下编译的流程（以下环境为macos下）。
安装
- 安装nvm。
brew install nvm - 安装nodejs。
nvm install v11.15.0(注意，由于工具是2017年发布，新版本node会有问题，所以使用老版本) - 安装bower和gulp。
npm install bower，npm install gulp - git clone https://github.com/SunHuawei/SourceDetector.git
- npm install
- bower install
- gulp
- 打开Chrome设置-扩展程序
- 点击"加载已解压的扩展程序..."
- 选择path/to/source-detector/dist目录
使用
使用很简单，开启插件，我们正常浏览网站即可，该插件会自动请求网站中是否存在.map文件。如果存在，会提示器数量。点开插件后，我们可以点击链接直接下载代码包至本地。使用简单方便。大家可以看作者的文章https://zhuanlan.zhihu.com/p/26033573
2.restore source tree
地址：https://github.com/alexkuz/restore-source-tree
我测试了下，有的可能下载不回来文件。
安装
这个是命令行工具。安装好npm后，直接 npm i -g restore-source-tree 。
使用
- 下载.map文件。
- restore-source-tree --out-dir <OUT_DIR>
既然可以解开文件了，就可以想以前一样进行分析和挖掘了。可以尝试寻找是否有隐藏的敏感信息，发现新的输入点，挖掘xss等。
原理
我们需要了解下webpack和sroucemap。
什么是webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。——来自官网说明
什么是sourcemap
sourcemap是为了解决开发代码与实际运行代码不一致时，帮助我们方便在浏览器中调试代码的技术，它本身只是一个独立的map文件，与源码在同一个目录下。详细内容可以看JavaScript Source Map 详解。
我们经常遇到的前端代码经过webpack打包压缩为一个文件，使得调试和分析变得头痛。那么sourcemap可以让开发者方便的调试。如果部署到线上没有关闭sourcemap，这就让我们可以如开发者一样调试js代码。
本身网络上的文章讲解的很清楚了，我这里不做过多解释。请看后文参考。
参考
- http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
- https://www.webpackjs.com/concepts/
- https://zhuanlan.zhihu.com/p/26033573
- https://mp.weixin.qq.com/s/LRRycBY9ERIMBEh-MKjBCw