如何在React应用程序中存储OAuth2访问令牌？

Question

我是React的新手，想安全地存储OAuth2访问令牌以调用API。我发现了以下选项，

1. 将其保留在本地存储/会话存储中（这可能容易受到XSS攻击）
2. 具有React应用程序的后端，并将访问令牌存储在后端会话中，并保留会话cookie来标识浏览器会话。然后通过后端进行所有API调用以添加Bearer标头。
3. 加密访问令牌并将其存储为cookie。通过后端可以避开API访问，在此处解密加密的cookie，并将其添加为Bearer标头。

什么是最好的解决方案？

Answer 1

我会选择第三种选择

Encrypt the access token and store it as a cookie. API access will be haven through the back-end where encrypted cookie will be decrypted and added as a Bearer header.

我们必须存储在客户端中的与令牌相关的所有内容都无法解决，但是可以通过对其添加加密以使其更安全来使其安全，但是这种方法将使开发人员必须设置加密和解密算法来处理令牌

Answer 2

您的第二个选择是最好的。我们也这样做。 具有React应用程序的后端，并将访问令牌存储在后端会话中，并保留会话cookie来标识浏览器会话。然后通过后端进行所有API调用，以添加Bearer标头。

Answer 3

我最近发现的最好的解决方案之一是oauth2-worker，这里将令牌存储在worker内的变量中，这样就无法从应用程序上运行的js对其进行访问。它也可以用作代理，我们需要通过工作程序进行API调用，以便添加Authorization标头。