将jwt token存储在LocalStorage或cookie中，并将用户的数据存储在Context API中是否安全方便

Question

我正在React中创建一个身份验证服务，我正在尝试找到一种理想的方法，从后端存储JWT并存储在cookie或localhost中，并将用户数据存储在上下文API中以通过网络访问用户数据

Answer 1

将访问令牌存储在本地存储中很方便（访问令牌是否采用 JWT 形式并不重要）。但您必须记住，它并不安全。存储在浏览器中的令牌容易受到 XSS 攻击。任何脚本都能够访问该令牌并窃取用户的数据。截至 2022 年 4 月，没有安全的方法可以在浏览器中存储令牌。

您的首要任务应该是减轻应用程序中的 XSS 风险（OWASP 和 Mozilla 基金会有一些关于如何处理该问题的指南）。如果您想进一步加强应用程序的安全性，我建议您根本不要将令牌保留在浏览器中。在 Curity，我们描述了一种称为令牌处理程序的模式，在该模式中，您使用一个简单的后端组件来处理令牌并向浏览器发出安全 cookie。这会增加应用程序的复杂性，但会增强安全性。您可以在此处阅读有关该模式的更多信息：https://curity.io/resources/learn/the-token-handler-pattern/我们还创建了一个示例实现，以便人们可以轻松开始使用该模式：https： //github.com/curityio/oauth-agent-node-express

Answer 2

是的，这是将 jwt 令牌存储在本地存储中的最佳方法，因为每个 API 也有一些身份验证检查，因此如果有人尝试删除该令牌，那么您的 API 将触发错误消息。对于用户数据而不是上下文 API，我建议您使用 redux 来存储用户数据。

Answer 3

如果jwt token没有隐私信息，也没关系。 Jwt 令牌应该包含非私人信息。如果你想要 jwt 的一些私人信息，那么你应该使用 session 和 cookies

Answer 4

如果你想避免 props 钻取，或者以钻取的方式将 props 共享给多个组件，请使用 contextApi。它的目的是在组件树中共享道具。

如果您的浏览器刷新，您的数据将不会被保留，因此如果您想在刷新后将数据共享到所有页面，请考虑使用本地存储。

您绝对应该将 jwt 令牌存储在本地存储中，但请确保对组件的每个临时组件进行身份验证，这样您的道具就不会过时。

您的 Api 应该在 HOC 或父组件上调用，其中 oAuth 可用于检查 api url 的标头，相应地，当某些内容发生更改时，您的所有子组件都会获取新数据。

Answer 5

将 JWT 存储在 localStorage 和 sessionStorage 中都不安全。由于它们是公开的并且每个脚本都可以读取它们 - XSS 攻击。如果您的网站容易受到 XSS 攻击，只要 JWT 有效，攻击者就可以读取 JWT 并代表真实用户进行操作。

您可以将其存储在 HttpOnly SameSite cookie 中。但还可能发生其他不好的事情，甚至导致无法使用 JWT（例如 SPA 应用程序将无法读取 HttpOnly cookie）。

存储 JWT 最安全的方式是在内存中。这也是 Auth0 推荐的地方。

如果您需要更多的安全性，您可以将其存储在 HttpOnly cookie 中，就像我之前写的那样，但是中间应该有一些后端能够读取它并创建正确的请求。这种技术称为 BFF——“后端换前端”。