前言

前段时间，在获得某系统的授权并进行渗透测试，仅一个 URL 地址，测试的链接打开就一个 Web 页面，无测试账号，账密经过加密传输且不可爆破。在一番简单测试无果后，根据收集到的信息，分析出该系统是前后端分离的，前端使用 Vue 所开发，并使用了 Webpack 技术打包相关资源。而 Vue 应用在使用 Webpack 打包时，如果没有正确配置，就会导致 Vue 源码泄露。

漏洞描述

Webpack 是一个 JavaScript 应用程序的静态资源打包器（ module bundler ）。它会递归构建一个依赖关系图（ dependency graph ）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

大部分 Vue 应用会使用 Webpack 进行打包，如果没有正确配置，就会导致 Vue 源码泄露，可能泄露的各种信息如 API、加密算法、管理员邮箱、内部功能等。

漏洞检测

Vue 项目源码在泄漏的情况下，可以在浏览器控制台中的 Sources —> Page —> webpack:// 中查看源代码：

同时，使用 Webpack 打包 Vue 应用会在网站 js 同目录下生成 js.map 文件。这也是确定存不存在源码泄露的依据。

.map 文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了 map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

例如直接查看网站的 js 文件，可以在末尾处有 js.map 文件名：

当你访问这个 js.map 文件，即可对该文件进行下载。

漏洞利用

根据上述，我们虽然可以直接通过浏览器的 webpack:// 处查看源代码，但是为了更直观、可审计代码，我们可以借助其他插件，帮我们把源代码直接下载到本地分析浏览。

reverse-sourcemap

在本地使用 npm 安装 reverse-sourcemap ：

npm install --global reverse-sourcemap

工具安装后，将网站 js.map 下载保存到一个文件夹内，使用该工具还原（以还原主 js.map 源码为例）：

reverse-sourcemap --output-dir ./ app.d61xxxxxxx7a4d0aa777.js.map

执行成功后生成的源码会放在当前目录下的 webpack 中：

接下来就可以对 Vue 项目源码进行分析审计了。

如果需要审计分析全部源码，则将网站所有 js.map 下载保存到本地文件夹内，配合使用 -v 参数指定所存放 js.map 文件夹路径，即可根据文件夹内所有 js.map 还原源码。

SourceDetector

SourceDetector 是一个谷歌浏览器插件，项目链接如下：

• https://github.com/SunHuawei/SourceDetector

此插件可以自动的判断网站是否存在 js.map 文件，并且能够利用该插件直接下载到 js.map 的 Vue 源码：

插件安装后，即可去浏览相关网站，每次浏览网站时，该插件就会自动获取 js.map 文件并记录：

点击插件中的链接地址即可直接下载到 js.map 还原后的 Vue 源码，然后进行分析审计。

有了如上操作得到 Vue 源码之后，进行分析，根据代码中定义的接口、注释等找到了一些其它的中高危漏洞，在完成渗透测试报告并提交后，并整理了该文档。

漏洞危害

可能泄露的各种信息如 API 、加密算法、管理员邮箱、内部功能等。

漏洞修复

• 在项目路径下修改 config/index.js 中 build 对象 productionSourceMap: false；
• 建议删除或禁止访问正式环境中的 js.map 文件。