解决Vue2官网Webpack源码泄露漏洞

一：漏洞产生

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

F12查看源代码，经过Webpack打包后末尾会存在这样的注释

将注释内容拼接到域名后,访问下载js.map文件

然后在文件目录下打开终端输入: reverse-sourcemap -v app.8cdc0ffa.js.map -o test

Webpack 生成的.map 文件（即 JavaScript 源映射文件）会暴露项目的原始代码结构，这可能导致敏感信息泄露。要解决此问题，主要从两方面入手：一是禁止生成这些源映射文件，二是保证生产环境无法访问到它们。

若项目采用 Vue CLI 构建，可按以下步骤操作：

首先，打开项目根目录下的vue.config.js文件。要是没有这个文件，就自行创建一个。

接着，在文件里添加或修改如下配置：

javascript 复制代码

module.exports = {
  productionSourceMap: false, // 关闭生产环境的源映射文件生成
  configureWebpack: {
    devtool: false // 确保开发工具不会生成源映射
  }
}

若项目是基于 Webpack 直接配置的，就需要修改webpack.prod.js配置文件：

javascript 复制代码

const config = {
  // 其他配置...
  devtool: false, // 关闭生产环境的源映射
  optimization: {
    // 其他优化配置...
  }
};

在项目目录下打开终端，执行以下命令删除现有源映射文件：

bash 复制代码

find dist -name "*.js.map" -type f -delete

如果你使用的是 Windows 系统，可以使用 PowerShell 命令：

bash 复制代码

Get-ChildItem -Path dist -Filter *.js.map -Recurse | Remove-Item

如果你使用的是 Nginx 服务器，可在配置文件中添加如下规则：

bash 复制代码

location ~ \.js\.map$ {
    deny all;
    return 404;
}

若是 Apache 服务器，则在.htaccess文件中添加以下内容：

bash 复制代码

<FilesMatch "\.js\.map$">
    Order deny,allow
    Deny from all
</FilesMatch>

修改 CI/CD 脚本或者部署流程，防止源映射文件被部署到生产环境。比如，在构建命令中明确排除这些文件：

bash 复制代码

npm run build -- --no-source-map

部署修改后的代码之后，要验证源映射文件是否还能被访问。具体操作是尝试访问之前的 URL：

复制代码

http://www.gzznjk.com/js/app.8cdc0ffa.js.map

如果修复成功，访问时会返回 404 错误。

通过上述步骤，就能有效解决 Webpack 源码泄露漏洞，保护项目的敏感信息不被泄露。