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

时间:2018-01-23 10:30:36

标签: reactjs security web-applications webhooks

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

是否有办法存储令牌而不将其暴露给世界?

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

谢谢大家的时间!

3 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:2)

  

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

Please check here to understand the JWT token mechanism

如果网络应用没有登录信息。如果没有用户详细信息,则无法生成令牌。

令牌应该在最佳做法请求的标题中传递。

答案 2 :(得分:2)

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

详细了解React here.

中的环境