在 React 前端安全地存储身份验证令牌答案

【问题标题】：Securely storing auth token in React Frontend在 React 前端安全地存储身份验证令牌
【发布时间】：2018-01-23 10:30:36
【问题描述】：

我目前正在开发一个单页反应应用程序。这个应用程序不需要任何登录，它将是公开可用的。我正在向另一个我无权访问且我不维护的 API 的 webhook 发出 POST 请求。此 API 要求我通过 POST 发送身份验证令牌。我想知道如何安全地存储这个令牌，这样它就不会泄露出去。我需要按原样发送它，因此不能将其存储在后端提供的 cookie 中。存储在 JWT 中是行不通的，因为我可以在没有秘密的情况下对其进行解码。

有没有办法在不暴露给世界的情况下存储令牌？

我希望这个问题很清楚，如果没有让我知道，我会解释得更好。

感谢大家的宝贵时间！

【问题讨论】：

标签： reactjs security web-applications webhooks

【解决方案1】：

我通常会运行一个本地 Express 服务器并通过它代理请求。

您将在您的 Express 应用程序中设置一个路由，您将从您的 React 前端 POST 到该路由，然后此 Express 路由处理程序从服务器端调用外部 API，该 API 具有放入标头的令牌.然后响应返回到你的 React 前端，它不知道任何关于外部 API 或令牌的信息。

【讨论】：

太棒了！谢谢你。我没想到！
我正在将 Firebase 云存储 (firebase.google.com/products/storage) 集成到我的应用中。通过快递代理首先会失去它的一些好处吗？即离线/在线自动暂停/恢复文件上传

【解决方案2】：

您不能将令牌存储在前端。要么你需要使用 cookie/session 来存储令牌。如果你想存储令牌，你需要对其进行加密并存储将是更好的选择。

Please check here to understand the JWT token mechanism

如果网络应用没有登录名。如果没有用户详细信息，您将无法生成令牌。

令牌应在请求的标头中传递以获得最佳实践。

【讨论】：

【解决方案3】：

如果您使用create-react-app 来实例化您的 React 项目，您是否考虑过使用环境变量来存储令牌？它不是 100% 安全可靠的，请检查 here 的缺点，但无需单独的代理请求即可快速修复。您可以在目录的根目录中创建一个 .env 文件（如果使用 git，请确保将其添加到您的 .gitignore 中）并在那里定义变量。它们需要以 REACT_APP 开头，例如 REACT_APP_SECRET=1234，然后可以在您的应用程序中使用 process.env.REACT_APP_SECRET 引用它们。

阅读更多关于 React 环境的信息here.

【讨论】：

facebook.github.io/create-react-app/docs/… : 警告：不要在你的 React 应用程序中存储任何秘密（例如私有 API 密钥）！环境变量嵌入到构建中，这意味着任何人都可以通过检查应用程序的文件来查看它们。