一：漏洞產生

????????Webpack是一個JavaScript應用程序的靜態資源打包器。大部分Vue等應用項目會使用Webpack進行打包，如果沒有正確配置，就會導致項目源碼泄露，可能泄露的各種信息如API、加密算法、管理員郵箱、內部功能等等。

F12查看源代碼，經過Webpack打包后末尾會存在這樣的注釋

????????將注釋內容拼接到域名后,訪問下載js.map文件

????????http://www.xxxx.com/js/app.8cdc0ffa.js.map

????????然后在文件目錄下打開終端輸入: reverse-sourcemap -v app.8cdc0ffa.js.map?-o test

二：解決辦法

解決思路

Webpack 生成的.map 文件（即 JavaScript 源映射文件）會暴露項目的原始代碼結構，這可能導致敏感信息泄露。要解決此問題，主要從兩方面入手：一是禁止生成這些源映射文件，二是保證生產環境無法訪問到它們。

具體操作方法

1. 禁止生成 JavaScript 源映射文件

若項目采用 Vue CLI 構建，可按以下步驟操作：
首先，打開項目根目錄下的vue.config.js文件。要是沒有這個文件，就自行創建一個。
接著，在文件里添加或修改如下配置：

module.exports = {productionSourceMap: false, // 關閉生產環境的源映射文件生成configureWebpack: {devtool: false // 確保開發工具不會生成源映射}
}

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

const config = {// 其他配置...devtool: false, // 關閉生產環境的源映射optimization: {// 其他優化配置...}
};

2. 刪除已存在的源映射文件

在項目目錄下打開終端，執行以下命令刪除現有源映射文件：

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

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

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

3. 配置 Nginx/Apache 禁止訪問源映射文件

如果你使用的是 Nginx 服務器，可在配置文件中添加如下規則：

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

若是 Apache 服務器，則在.htaccess文件中添加以下內容：

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

4. 更新項目部署流程

修改 CI/CD 腳本或者部署流程，防止源映射文件被部署到生產環境。比如，在構建命令中明確排除這些文件：

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

5. 驗證修復效果

部署修改后的代碼之后，要驗證源映射文件是否還能被訪問。具體操作是嘗試訪問之前的 URL：

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

如果修復成功，訪問時會返回 404 錯誤。

額外建議

1. 檢查項目依賴，保證使用的是 Webpack 和 Vue 的最新穩定版本。
2. 對所有生產環境的域名進行掃描，確認沒有其他源映射文件泄露的情況。
3. 把源映射文件添加到.gitignore中，避免它們被提交到版本控制系統。
4. 考慮使用代碼混淆工具，如 Terser，來增強生產代碼的安全性。

通過上述步驟，就能有效解決 Webpack 源碼泄露漏洞，保護項目的敏感信息不被泄露。