React 并将 jwt 令牌存储在本地存储中

Question

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

但我发现react据说是XSS安全的（他们说React受XSS保护是什么意思？）那么可以使用localStorage来存储jwt吗？如果不是，行业标准是什么？

Answer 1

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

饼干

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

本地存储

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

React 是“XSS 安全的”

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

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