Vue打包去掉map文件

引言：
某天项目上发来这段话，说我们的前端页面有漏洞，原话是这么说的——SourceMap文件未加以保护，存在泄漏风险。攻击者可利用该SourceMap文件还原前端源码，获取业务逻辑、接口路径及参数信息，增加对系统后续攻击的成功几率。
搞的一头雾水，之前从没碰到过说前端还有漏洞，网上一查，原来真有这么回事，在此记录一下。

一、风险说明

源码暴露：攻击者可通过 .map 文件反编译出原始代码（如变量名、注释、业务逻辑）。
敏感信息泄露：源码中可能包含 API 密钥、数据库连接字符串等敏感信息。
攻击面扩大：攻击者可分析代码结构，针对性地发起攻击（如 SQL 注入、XSS）。

 

二、解决方案

1. 生产环境禁用 Source Map

在 vue.config.js 中关闭 Source Map 生成：

module.exports = {
  productionSourceMap: false, // 禁用生产环境的 Source Map
}

优点：彻底避免 .map 文件生成，减小包体积。
缺点：无法在生产环境调试代码（如 Sentry 错误追踪需 Source Map）。

 

2. 保留 Source Map 但不上传到生产服务器
流程：

• 本地或 CI 环境生成 Source Map。
• 将 .map 文件单独存储（如私有存储桶），不上传到 CDN 或生产服务器。
• 仅在需要调试时（如排查线上错误），手动关联 Source Map。

 

3. 使用 HTTP 响应头保护

若必须保留 .map 文件，通过 nginx 或 CDN 配置禁止外部访问：

# nginx 配置示例
location ~ \.map$ {
  deny all;         # 拒绝所有请求
  return 404;       # 返回 404 错误
}

验证方法：尝试直接访问 .map 文件（如 https://yourdomain.com/js/app.xxxx.js.map），应返回 404。

 

4. 部署后删除 .map 文件

在部署脚本中自动删除 .map 文件：

# CI/CD 脚本示例（部署后执行）
find dist/ -name "*.map" -type f -delete

 

5. 对 Source Map 加密 / 混淆

使用工具对 Source Map 加密，仅授权用户可解密：

# 使用 source-map-encryptor 加密
npm install source-map-encryptor -g
source-map-encryptor dist/js/*.map --key your-secret-key

 

6. 限制 Source Map 访问权限

 

CDN 配置：
仅特定 IP 地址可访问 .map 文件。
添加签名验证（如 AWS CloudFront 的 Signed URLs）。

 

7. 使用 Sentry 等错误监控工具

将 Source Map 上传到 Sentry 等平台，由其管理源码映射：

# 安装 Sentry CLI
npm install @sentry/cli -D

# 上传 Source Map 并删除本地文件
sentry-cli releases files $RELEASE upload-sourcemaps ./dist --url-prefix "~/js" --rewrite