如何在React.js前端应用中隐藏密钥？已尝试.env但无效

一、先解决.env不生效的问题 #

如果你的.env文件配置后没起作用，按下面的步骤逐一排查：

• 必须用REACT_APP_前缀：React Create App（CRA）只会识别以REACT_APP_开头的环境变量，比如REACT_APP_API_SECRET，不是这个前缀的变量会被直接忽略，哪怕配置正确也没用。
• 文件位置要正确：.env文件必须放在项目根目录（和package.json、public文件夹同级），放在src或其他子目录里CRA根本无法识别。
• 重启开发服务器：修改.env文件后，一定要关掉当前的npm start进程，重新启动服务，否则新的环境变量不会被加载。
• 区分环境文件：如果你有.env.development（开发环境）和.env.production（生产环境），要确认当前运行的环境加载的是对应文件，比如npm run build会自动使用生产环境的配置。

但必须明确：哪怕.env配置成功了，密钥最终会被打包到前端静态文件里，任何人打开浏览器开发者工具，查看源代码或网络请求就能直接拿到这个密钥，完全起不到“只有你的前端能发请求”的作用。

二、更安全的请求合法性验证方案 #

既然要确保只有自己的前端能向后端发请求，别在前端存密钥，换用这些后端主导的验证机制：

• 会话Cookie验证：用户通过前端登录后，后端设置HttpOnly、Secure、SameSite=Strict的Cookie，后续前端的请求会自动携带这个Cookie，后端验证Cookie对应的会话是否有效。这种方式下，Cookie不会被前端JS读取，安全性更高，只有登录后的合法用户能发请求。
• 短时效JWT Token：登录后后端返回一个有效期很短的JWT（比如15分钟），前端把Token存在内存里（别存localStorage，避免XSS风险），每次请求在请求头里携带Authorization: Bearer ${token}，后端验证Token的签名和有效期。Token过期后，前端自动跳转到登录页重新获取。
• 请求签名（辅助方案）：结合会话或Token，后端给前端返回一个临时的签名密钥，前端每次请求时用这个密钥对请求参数+当前时间戳进行哈希签名，后端验证签名的正确性和时间戳（防止重放攻击）。但这个临时密钥必须和会话绑定，过期就失效，不能长期存在前端。
• 同源头辅助检查：后端可以检查请求的Origin或Referer头，只允许你的前端域名（比如https://your-frontend.com）的请求，但这个可以被伪造，只能作为辅助验证手段，不能单独使用。

总结 #

前端环境变量根本藏不住敏感密钥，哪怕用.env也只是“看起来藏了”，本质上还是公开的。必须依赖后端的验证逻辑，用会话、短时效Token这类机制，才能真正确保请求的合法性。

内容的提问来源于stack exchange，提问作者modir bentalab