前言

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

漏洞描述

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

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

漏洞检测

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

image-20220921202431114

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

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

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

image-20220921202819043

当你访问这个 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 中:

image-20220921204643903

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

SourceDetector

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

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

image-20220921204815840

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

image-20220921204944446

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

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

漏洞危害

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

漏洞修复

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

本文标题:Webpack 致使 Vue 源码泄露

本文链接:https://www.isisy.com/1344.html

除非另有说明,本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

声明:转载请注明文章来源。

最后修改:2022 年 09 月 22 日
如果觉得我的文章对你有用,请随意赞赏