通过sourcemap解压缩webpack 实战

现在许多网站都使用webpack对网站打包,许多前端框架也默认配置好webpack。这会在渗透测试或挖洞过程中带来一些麻烦。这让我们极其痛苦。但是开发者忽视起潜在风险,在线上环境使用了开发环境的配置,或者配置了sourcemap允许在生产环境中使用。这使得我们有了机会。

在实际渗透过程中,许多网站还是存在这种情况。通常一般是配置了devtool: 'source-map'

我们可以在js的文件名后面加上.map,如果在这种该文件,我们则可以通过工具解压缩webpack。

或者当我们一般看到类似这样的代码时,也基本可以对其进行解压缩。

利用

可以使用的工具有:

1. SourceDetector

地址:https://github.com/SunHuawei/SourceDetector
这个工具是chrome浏览器的插件,gogole商店中没有该插件,需要自己编译,这里遇到些坑,给大家说下编译的流程(以下环境为macos下)。

安装

  1. 安装nvm。brew install nvm
  2. 安装nodejs。 nvm install v11.15.0 (注意,由于工具是2017年发布,新版本node会有问题,所以使用老版本)
  3. 安装bower和gulp。 npm install bowernpm install gulp
  4. git clone https://github.com/SunHuawei/SourceDetector.git
  5. npm install
  6. bower install
  7. gulp
  8. 打开Chrome设置-扩展程序
  9. 点击"加载已解压的扩展程序..."
  10. 选择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

使用

  1. 下载.map文件。
  2. 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代码。

本身网络上的文章讲解的很清楚了,我这里不做过多解释。请看后文参考。

参考

  1. http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
  2. https://www.webpackjs.com/concepts/
  3. https://zhuanlan.zhihu.com/p/26033573
  4. https://mp.weixin.qq.com/s/LRRycBY9ERIMBEh-MKjBCw
\