简体繁体 English

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

[英]Securely storing auth token in React Frontend

原文 2018-01-23 10:30:36 3 3 reactjs/ security/ web-applications/ webhooks

I am currently working on a single page react app. 我目前正在开发一个单页反应应用程序。 This app will not require any login and it will be publicly available. 此应用程序不需要任何登录，它将公开提供。 I am making a POST request to a webhook of another API that I do not have access to and that I do not maintain. 我正在向另一个我无法访问的API的webhook发出POST请求，而我没有维护。 This API required me to send an authentication token via the POST. 此API要求我通过POST发送身份验证令牌。 I wonder how I can securely store this token so that it does not get out in the world. 我想知道如何安全地存储这个令牌，以便它不会在世界上出现。 I need to send it as is so storing it in a cookie that a backend provides is not an option. 我需要按原样发送它，因此将其存储在后端提供的cookie中不是一种选择。 Storing in in JWT will not work as I can decode that without the secret. 存储在JWT中是行不通的，因为我可以在没有秘密的情况下解码它。

Is there even a way to store the token without exposing it to the world? 有没有办法存储令牌而不将它暴露给世界？

I hope the issue is clear, if not let me know and I'll explain better. 我希望这个问题很清楚，如果不让我知道，我会更好地解释。

Thank you all for your time! 谢谢大家的时间！

3 个解决方案

I would usually have a local Express server running and proxy the request through that. 我通常会运行本地Express服务器并通过它代理请求。

You would set up a route in your Express app that you would POST to from your React front-end, this Express route handler then makes the call to the external API from the server side which has the token to put in the header. 您将在Express应用程序中设置一条路径，您将从React前端POST，这个Express路由处理程序然后从服务器端调用外部API，该外部API具有要放入标头的令牌。 Then the response is returned to your React front-end without it knowing anything about the external API or tokens. 然后，响应将返回到您的React前端，而不会了解有关外部API或令牌的任何信息。

You can't store the token in front-end. 您无法将令牌存储在前端。 either you need to use cookies/session to store the token. 要么您需要使用cookie / session来存储令牌。 If you want to store the token you need to encrypt it and store it will be the better option. 如果您想存储令牌，则需要加密它并存储它将是更好的选择。

Please check here to understand the JWT token mechanism 请在此处查看以了解JWT令牌机制

if the web app doesn't have a login. 如果网络应用程序没有登录。 you can't generate token without user details. 没有用户详细信息，您无法生成令牌。

The token should be passed in the header of the request for best practices. 令牌应该在最佳实践请求的标头中传递。

If you're using create-react-app to instantiate your React project, have you looked into using an environment variable to store the token? 如果您使用create-react-app来实例化您的React项目，您是否考虑过使用环境变量来存储令牌？ It's not 100% safe and secure, check here for the cons, but can be a quick fix without a separate proxy request. 它不是100％安全可靠，请在此处查看缺点，但可以快速修复，无需单独的代理请求。 You can make an .env file (make sure to add it to your .gitignore if using git) in the root of your directory and define variables there. 您可以在目录的根目录中创建一个.env文件（确保将其添加到.gitignore，如果使用git）并在那里定义变量。 They need to start with REACT_APP, like REACT_APP_SECRET=1234 and can then be referenced where you need them in your app with process.env.REACT_APP_SECRET . 他们需要从REACT_APP开始，比如REACT_APP_SECRET=1234 ，然后可以在您的应用中使用process.env.REACT_APP_SECRET引用它们。