生产环境公开css source map会暴露原始样式源码、路径、注释及敏感信息，构成明确安全风险；其sources字段含原始文件路径，sourcescontent（若启用）内嵌完整源码，注释与构建痕迹亦可能泄露。
生产环境公开 CSS Source Map 会直接暴露原始样式源码，包括类名、变量、注释、文件路径甚至 API 地址或密钥片段，这不是“调试便利性”问题，而是明确的安全风险。
SourceMap 里到底藏了什么
CSS Source Map（如 app.css.map）不是简单的行号映射表。它通常包含：
-
sources字段：列出原始 SASS/LESS/Vue 单文件组件路径，例如"/src/styles/main.scss"或"/Users/alex/project/src/components/Button.vue" -
sourcesContent字段（若启用）：直接内嵌原始未编译 CSS/SCSS 内容，整段源码可一键还原 - 注释保留：开发时写的 TODO、FIXME、临时开关、内部域名、测试用 token 都可能原样写入
- 构建上下文痕迹：Webpack/Vite 的绝对路径、node_modules 中第三方库的原始样式结构，便于攻击者识别技术栈版本
公开 .map 文件后会发生什么
攻击者不需要高级技巧就能利用：
- 直接请求
/static/css/app.css.map—— 大多数 Nginx/Apache 默认允许静态文件通配访问 - 用
source-map-explorer或浏览器 DevTools → Sources 面板加载该文件，立刻看到原始Button.vue结构和 scoped 样式逻辑 - 结合
sourcesContent提取完整 SCSS 变量定义（如$primary-color: #0066cc;），反推设计系统规范 - 发现注释里的
// TODO: remove before prod或// dev-only api: http://localhost:3001/debug，成为渗透入口
Webpack/Vite 构建配置中容易踩的坑
常见错误不是“忘了关”，而是误以为“只关 JS 就够了”：
- Vite 中设了
build.sourcemap: true，但没加build.rollupOptions.output.sourcemapIgnoreList过滤 CSS 相关文件 - Webpack 用了
devtool: 'source-map'，它默认对所有 asset（含 CSS）生成 .map，且写入output.path目录 - Vue CLI 项目升级后，
vue.config.js里仍保留css.sourceMap: true，该选项独立于 JS sourcemap 控制 - Nginx 配置遗漏：
location ~ \.map$ { deny all; }，导致即使构建没生成，旧部署残留的 .map 仍可被访问
真正安全的做法不是“不生成”，而是“不暴露”
Source Map 对错误监控（如 Sentry）仍有价值，关键在于隔离分发路径：
- Webpack 场景下，禁用
devtool，改用SourceMapDevToolPlugin，设置filename: '[file].map'+append: false（不注入 sourceMappingURL） - Vite 场景下，用
@sentry/vite-plugin，配合filesToDeleteAfterUpload: './dist/**/*.map'，上传后立即删 - CI 流程中增加检查：
find dist -name "*.map" | grep -q "." && echo "ERROR: map files found" && exit 1 - CDN/OSS 部署脚本显式 exclude
**/*.map，而不是依赖构建输出“应该没有”
最常被忽略的一点：CSS 和 JS 的 Source Map 是独立控制的，Vue 项目里 vue-style-loader 或 css-loader 的 sourceMap 选项必须单独关掉，否则 JS 关了，CSS 还在悄悄吐 .map。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
