生产环境 Source Map 泄露有什么风险？前端如何安全使用 Source Map？
简化版
Source Map 能把压缩后的线上代码映射回源码，方便排查错误。但如果生产环境公开 .map 文件，攻击者可能看到源码结构、接口路径、注释、业务逻辑和隐藏配置，从而提高攻击效率。安全做法是生产不公开 source map，或只上传到错误监控平台；构建产物去掉 sourceMappingURL；不要在前端源码里写密钥；监控平台要做权限控制。
详细版
Source Map 本身不是漏洞，但公开后会降低攻击成本。
| 风险 | 说明 |
|---|---|
| 源码结构暴露 | 组件、路由、接口模块清晰可见 |
| 注释泄露 | TODO、内部说明可能暴露细节 |
| 隐藏逻辑暴露 | 权限判断、灰度开关更容易被分析 |
| 敏感配置暴露 | 如果误写密钥，会直接泄露 |
//# sourceMappingURL=app.123.js.map真正不能放前端的是密钥；Source Map 泄露会让已有问题更容易被发现和利用。
完整版教学
一、Source Map 是什么
线上 JS 通常会压缩、混淆和打包，报错栈只有 app.123.js:1:10086，很难定位源码。Source Map 用来建立产物位置和源码位置的映射。
错误监控平台拿到 Source Map 后，可以把线上错误还原到源码文件和行列。
二、为什么公开 Source Map 有风险
公开 .map 文件后，任何人都能还原代码结构。即使代码已经压缩，攻击者也能看到模块名、函数名、路由名和部分源码。
这会帮助攻击者理解系统边界，例如哪些接口存在、哪些功能隐藏、哪些判断只在前端做。
三、常见泄露方式
最常见是构建工具自动生成 .map，并且静态资源服务器把它们一起发布。
另一个线索是产物尾部的 sourceMappingURL 注释。浏览器 DevTools 会根据它尝试加载 map 文件。
四、安全使用方式
推荐策略：
- 生产构建生成 source map，但不对公网发布。
- CI 上传 source map 到 Sentry 等监控平台。
- 上传后删除构建目录中的
.map。 - 线上 JS 去掉
sourceMappingURL。 - 监控平台项目权限最小化。
npx sentry-cli sourcemaps upload dist/assets五、不同 devtool 策略
| 策略 | 特点 | 生产建议 |
|---|---|---|
| source-map | 独立 map，质量高 | 可生成但不公开 |
| hidden-source-map | 不写引用注释 | 常用于监控上传 |
| nosources-source-map | 不包含源码内容 | 风险较低但定位弱 |
| eval-source-map | 开发快 | 不用于生产 |
六、密钥不能写前端
有些团队以为不公开 source map 就能把密钥写在前端，这是错误的。前端代码、网络请求和运行时都在用户设备上，密钥无法保密。
Source Map 只是让泄露更明显，不是密钥泄露的根因。
七、常见误区与追问
- 误区：代码压缩了就没人看得懂。 Source Map 或逆向工具都能显著降低分析成本。
- 误区：不发 Source Map 就能在前端放密钥。 前端没有真正保密能力，密钥必须在服务端。
- 误区：错误监控平台上传 Source Map 没风险。 平台账号和项目权限也要严格控制。
- 追问：hidden-source-map 有什么用？ 生成 map 但不在产物里写公开引用，适合上传监控平台。
- 追问：如何检查是否泄露？ 访问 JS 尾部 sourceMappingURL 或扫描线上
.map文件。 - 追问：nosources-source-map 安全吗？ 它不包含源码内容，风险较低，但仍可能暴露文件路径和符号信息。
八、加强记忆
Source Map 记成“线上错误的源码地图”。地图可以给监控平台，别贴在公网门口；更别把密钥写进前端，以为藏地图就没人找得到。