前端常见敏感信息泄露有哪些？如何避免？
简化版
前端敏感信息泄露常见于源码、Source Map、构建产物、错误日志、埋点、URL、localStorage、注释和第三方脚本。原则是：前端代码里不要放密钥和内部秘密，生产构建要控制 Source Map 暴露，日志和埋点要脱敏，敏感操作必须放服务端。
详细版
前端天然运行在用户设备上，代码、请求、静态资源都能被查看。VITE_API_KEY、云服务密钥、后台接口地址、测试账号、内部注释、完整 Source Map 都可能泄露信息。
浏览器 DevTools
-> Sources 查看 JS bundle
-> Network 查看请求和响应
-> Application 查看存储
-> Console 查看日志防护要从构建、运行、监控三处入手：构建阶段剔除秘密和调试信息；运行阶段减少敏感数据落地；监控阶段对错误栈、用户输入、URL 参数和响应内容做脱敏。
完整版教学
一、为什么前端不能保存秘密
后端代码运行在服务器，用户看不到源码；前端代码会下载到浏览器，用户可以直接查看、格式化、断点调试。即使经过压缩混淆，也只是增加阅读成本，不是安全边界。
const SECRET_KEY = 'sk_live_xxx' // 危险：打进 bundle 就等于公开记忆钩子：凡是发到浏览器的内容，都要按“用户最终能看到”来设计。
二、常见泄露位置
| 位置 | 泄露内容 | 风险 |
|---|---|---|
| JS bundle | API key、内部逻辑、接口地址 | 被滥用、被逆向 |
| Source Map | 源码、注释、文件路径 | 降低攻击成本 |
| Console 日志 | token、用户数据、调试状态 | 被截图、插件或共享设备读取 |
| URL 参数 | token、手机号、订单号 | 进入历史记录、Referer、日志 |
| 埋点上报 | 表单内容、响应体 | 第三方平台持有敏感数据 |
这些泄露不一定马上变成漏洞，但会显著扩大攻击面。比如 Source Map 暴露后，攻击者能直接看到未压缩源码、路由名、接口封装和错误处理分支。
三、Source Map 如何处理
生产环境不是绝对不能生成 Source Map，而是不能无控制公开。常见策略是生成隐藏 Source Map 上传到错误监控平台，同时不让公网直接访问 .map 文件。
构建产物:
app.abc.js -> 对用户公开
app.abc.js.map -> 上传监控平台或内网保存，不公开如果 .map 文件公开，压缩变量名和源码目录几乎都能被还原。假设 bundle 只有 300KB，map 可能有 2MB，里面包含完整源码、注释和模块路径。
四、日志和埋点脱敏
function maskPhone(phone) {
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}
track('submit_form', {
phone: maskPhone('13812345678'),
})前端日志最容易在开发阶段顺手打印，最后忘记删掉。生产日志和埋点应只记录排障必要字段，避免记录身份证号、完整手机号、token、Cookie、密码、完整请求响应体。
脱敏不是随便截断。要按字段类型设计规则，例如手机号保留前 3 后 4，邮箱保留域名，token 只保留前后少量字符用于排查。
五、URL、Referer 和缓存
把敏感信息放在 URL 中非常危险。URL 会进入浏览器历史、代理日志、服务端访问日志，也可能通过 Referer 发送给第三方资源。
https://example.com/callback?token=abc
-> 浏览器历史
-> Nginx access.log
-> 第三方图片请求 Referer登录回调中的临时 code 应短期有效且一次性使用；真正长期凭证不应放在 URL。页面还可以通过 Referrer-Policy 限制跨站 Referer 泄露。
六、环境变量和构建边界
很多构建工具会把特定前缀的环境变量注入前端，例如 VITE_、NEXT_PUBLIC_。这些变量不是服务器私密变量，而是会进入客户端 bundle。
| 变量类型 | 能否放前端 |
|---|---|
| 公共 API base URL | 可以 |
| Sentry DSN 这类公开标识 | 视平台设计 |
| 云服务 Secret Key | 不可以 |
| 数据库密码 | 不可以 |
| 后台管理令牌 | 不可以 |
如果前端必须调用第三方服务，应由后端代理签名、换取临时凭证或限制 key 的来源、权限和额度。不要把“只读 key”简单理解为安全，很多平台的只读能力也足以造成数据泄露。
七、常见误区与追问
- 误区：代码压缩后就安全。 压缩不是安全边界，攻击者可以格式化和调试。
- 误区：Source Map 只是调试工具，没有风险。 公开 map 会暴露源码、注释、路径和业务逻辑。
- 误区：前端环境变量都是私密的。 注入客户端的变量会进入 bundle，用户可见。
- 追问：生产需要错误定位怎么办？ 使用隐藏 Source Map 上传监控平台，不公开
.map文件。 - 追问：URL 里放 token 有什么问题？ 会进入历史、日志、Referer 和截图链路。
- 追问：埋点为什么要脱敏？ 第三方分析平台和日志系统不应持有无必要的敏感数据。
八、加强记忆
前端敏感信息泄露要按“代码、存储、传输、日志”四个面检查：代码里不放秘密，存储里少落凭证，传输中避免 URL 携带敏感值，日志和埋点做脱敏。核心判断很简单：只要内容进了浏览器，就默认用户和攻击者都有机会看到；真正秘密必须留在服务端。