Reactjs 反应并将jwt令牌存储在localstorage中

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

---

但是我发现react应该是XSS安全的（），那么使用localStorage来存储jwt可以吗？如果没有，行业标准是什么？

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

Cookies

• 可以设置为

  httpOnly

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

  httpOnly

  cookie中为身份提供程序域设置一个长期刷新令牌

本地存储

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

反应为“XSS安全”

不是。开发人员可能更难使其易受攻击，但任何中等复杂度的React应用程序都很可能存在XSS漏洞。React对不同形式的XSS绝不免疫。只要开发人员有大量的选项将用户输入插入DOM，就会有XSS，因为有时候用“使其工作”的方式解决问题是最容易的<如果在应用程序中可行，代码>内容安全策略在现代浏览器中可能会有所帮助。虽然React在默认情况下是相当安全的，但这是事实，这意味着通常情况下它是正常的。这是现在任何现代框架的标准要求，并不意味着React中的XSS是不可能的。是的

---

最终，存储在

httpOnly

cookie中的会话id（使用正确实现的会话管理，如您的语言或框架提供的会话管理）通常是最安全的，其次是

httpOnly

cookie中的令牌，但这也取决于您的威胁模型和确切的用例。

我想您提到的两种攻击都与

令牌

存储无关。由于

http

是一个

无状态

协议，我们需要用一些东西来标识每个请求。早些时候这是会话cookies，现在是tokens。没有太大区别。@Panther这不是真的，xss和csrf都与令牌存储有很大关系，并且它们的风险状况非常不同。见下文。