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

Question

我目前正在开发一个单页面的react应用程序。此应用程序将不需要任何登录，它将是公开可用的。我正在向另一个API的webhook发出POST请求，但我无法访问该API，也无法维护该API。此API要求我通过POST发送身份验证令牌。我想知道如何安全地存储这个令牌，这样它就不会流传出去。我需要按原样发送它，所以将其存储在后端提供的cookie中不是一种选择。存储在JWT中将不起作用，因为我可以在没有秘密的情况下解码它。

有没有一种方法可以在不公开令牌的情况下存储令牌？

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

感谢大家抽出时间来！

Answer 1

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

您可以在Express应用程序中设置一个从React前端发布到的路由，然后此Express路由处理程序从服务器端调用外部API，该服务器端具有要放入标头中的令牌。然后，在不知道外部API或令牌的情况下，将响应返回给您的React前端。

Answer 2

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

Please check here to understand the JWT token mechanism

如果web应用程序没有登录。您无法在没有用户详细信息的情况下生成令牌。

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

Answer 3

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

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