React前端中安全存储认证令牌的方案咨询

首先得说句实在的：在完全公开、不需要用户登录的React SPA里，想让前端直接持有敏感令牌还完全不泄露，本质上是做不到的——毕竟浏览器的前端环境是完全开放的，任何存在于前端的令牌，都可能被有心人通过调试工具、XSS攻击或者静态代码分析扒出来。不过我们有办法把风险降到最低，甚至彻底规避前端碰令牌的情况：

1. 最稳妥的方案：加个后端代理层（强烈推荐） #

这是从根源解决问题的办法，让前端全程碰不到令牌：

• 具体流程：你的SPA别直接去调用第三方Webhook了，改成向你自己的后端发请求（请求里不用带任何敏感信息）；
• 后端来干活：把第三方Webhook的认证令牌存在你自己的后端（比如配置成环境变量、加密的配置文件），后端收到前端的请求后，自己组装好带令牌的POST请求，转发给第三方Webhook；
• 为啥之前说的cookie方案不行？大概率是你理解错了后端方案——不是让前端存cookie，而是后端自己攥着令牌，前端只负责“触发”请求，完全不碰敏感数据。

2. 临时过渡方案：构建时注入环境变量（仅适合低敏感场景） #

如果暂时没法加后端，只能让前端处理的话，可以试试构建时注入令牌：

• 操作起来很简单：在React项目里建个.env文件（记得把这个文件加到.gitignore里，别提交到代码库），定义个变量比如REACT_APP_WEBHOOK_TOKEN=你的令牌；
• 构建后这个变量会打包进JS代码里，你在组件里直接用process.env.REACT_APP_WEBHOOK_TOKEN就能拿到；
• 但必须提醒你：这种方式令牌还是藏在客户端的JS包里，懂行的人用浏览器调试工具或者反编译JS就能扒出来，所以只适合令牌泄露后果不严重的场景，或者第三方给你的令牌本身权限就很有限（比如只能发特定请求、有严格的调用频率限制）。

为啥其他前端存储方式都不靠谱？ #

• LocalStorage/SessionStorage：完全透明，用户自己打开开发者工具就能看到，而且很容易被XSS攻击偷走；
• Cookie：就算设置了HttpOnly，但你需要的是把令牌原样放在请求里，Cookie是自动附在请求头的，没法直接拿出来放到你需要的位置（除非后端配合，但你说后端方案不可行）；
• 内存里存状态/全局变量：页面一刷新就没了，而且别人打开控制台照样能查到内存里的变量，XSS攻击也能轻松获取；
• JWT：正如你说的，JWT不用密钥就能解码，而且你需要原样发送令牌，JWT那套签名机制在这里根本用不上，完全没必要。

总的来说：要是令牌的安全性要求高，一定要上后端代理层；如果是临时凑合用的低风险场景，再考虑构建注入环境变量，但心里得清楚这种方式的局限性。

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