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

Question

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

有没有办法存储令牌而不将它暴露给世界？

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

谢谢大家的时间！

Answer 1

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

您将在Express应用程序中设置一条路径，您将从React前端POST，这个Express路由处理程序然后从服务器端调用外部API，该外部API具有要放入标头的令牌。 然后，响应将返回到您的React前端，而不会了解有关外部API或令牌的任何信息。

Answer 2

您无法将令牌存储在前端。 要么您需要使用cookie / session来存储令牌。 如果您想存储令牌，则需要加密它并存储它将是更好的选择。

请在此处查看以了解JWT令牌机制

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

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

Answer 3

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

在这里阅读有关React环境的更多信息。