反应并将 jwt 令牌存储在本地存储中答案

【问题标题】：React and storing jwt token in localstorage反应并将 jwt 令牌存储在本地存储中
【发布时间】：2020-10-25 21:41:02
【问题描述】：

我最近刚开始在 react+express 应用程序中使用 jwt，遇到了存储 jwt 令牌的位置的问题。似乎两个主要选项是 localStorage 和 cookie，它们都容易受到各种攻击（XSS 和 CRSF）。

但是我发现 react 应该是 XSS 安全的 (What does it mean when they say React is XSS protected?) 那么使用 localStorage 来存储 jwt 可以吗？如果不是，这方面的行业标准是什么？

【问题讨论】：

我猜你提到的两种攻击都与token 存储无关。由于http 是stateless 协议，我们需要用一些东西来识别每个请求。以前这是会话 cookie，现在是令牌。差别不大。
@Panther 这不是真的，xss 和 csrf 都与代币存储密切相关，而且它们的风险状况也大不相同。见下文。

标签： reactjs security jwt local-storage xss

【解决方案1】：

cookies 和 localStorage 都是可接受的选项，并且都被许多应用程序使用。您需要了解它们的优缺点，并选择最适合您的用例。

Cookies

可以设置为httpOnly，这样javascript就无法访问了。这使得在 XSS 攻击中无法访问令牌。请注意，这并不意味着该应用不会受到 XSS 攻击。这仅意味着即使在 XSS 攻击成功的情况下，攻击者也无法访问令牌。
有必要明确保护您的应用免受 CSRF 的影响，因为身份验证信息将随请求自动发送。
只能发送到它们的来源（更不用说不同域上的 API）。
该令牌可能会被该 cookie 中的普通旧会话 ID 替换，因为您的应用程序可能并不是真正无状态的。它将降低复杂性并提高安全性。
不能用于复杂的单点登录场景中的访问令牌存储，其中身份提供者有自己的来源，并且应用程序与不同域上的多个后端通信。在这种情况下，短期访问令牌通常存储在 localStorage 中，并在 httpOnly cookie 中为身份提供者域设置一个长期刷新令牌。

本地存储

可以通过javascript访问，其中包括成功的xss攻击。
如果令牌作为请求标头发送，则通常不需要针对 CSRF 进行进一步保护（应用本身就受到保护，因为不会自动发送身份验证信息）。
令牌可以发送到不同的来源。这是主要的好处，也是您通常使用 localStorage 或 JWT 的最重要原因。如果您只想将令牌发送到您的单个应用程序源，您可能根本不需要 JWT，并且绝对不想使用 localStorage。

React 是“XSS 安全”

不是。开发人员可能更难使其易受攻击，但任何中等复杂度的 React 应用程序都极有可能存在 XSS 漏洞。 React 绝不能对不同形式的 XSS 免疫。只要开发人员有多种选项可以将用户输入插入 DOM，就会出现 XSS，因为有时以“使其工作”的方式解决问题是最容易的。如果在您的应用中可行，Content-Security-Policy 可能对现代浏览器有所帮助。尽管默认情况下 React 是非常安全的，但这确实是事实，这意味着通常它就可以了。这是现在任何现代框架的一个相当标准的要求，这并不意味着 React 中的 XSS 是不可能的。是的。

最终，存储在 httpOnly cookie 中的会话 ID（具有正确实施的会话管理，例如，由您的语言或框架提供）是最安全的一般 em>，后跟 httpOnly cookie 中的令牌，但这也取决于您的威胁模型和确切的用例。

【讨论】：