【问题标题】：How to store OAuth2 access tokens in a React application?如何在 React 应用程序中存储 OAuth2 访问令牌？
【发布时间】：2020-05-24 15:35:13
【问题描述】：
我是 React 新手，想安全地存储 OAuth2 访问令牌以调用 API。我找到了以下选项，
- 将其保存在本地存储/会话存储中（这可能容易受到 XSS 攻击）
- 拥有 React 应用程序的后端，并将访问令牌存储在后端会话中，并保留会话 cookie 以识别浏览器会话。然后通过后端进行所有API调用以添加Bearer header。
- 加密访问令牌并将其存储为 cookie。 API 访问将通过后端进行，加密的 cookie 将被解密并添加为 Bearer 标头。
什么是最好的解决方案？
【问题讨论】：
标签：
javascript
reactjs
ecmascript-6
oauth-2.0
【解决方案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.
所有与令牌相关的东西都必须存储在客户端，没有办法，但可以通过添加加密使其更安全，但这种方法会使开发人员必须设置加密和解密算法来处理代币
【解决方案2】：
您的第二个选项是最好的。我们也这样做。
拥有 React 应用程序的后端，并将访问令牌存储在后端会话中，并保留会话 cookie 以识别浏览器会话。然后通过后端进行所有API调用以添加Bearer header。
【解决方案3】：
我最近发现的最佳解决方案之一是oauth2-worker，这里它将令牌存储在worker 内的变量中，这样就无法从应用程序上运行的js 访问它。它还可以作为代理工作，我们需要通过 worker 进行 API 调用，以便它添加 Authorization 标头。