使用 ReactJS 将 JWT 存储在 localStorage 中是否安全?

我目前正在使用ReactJS构建一个单页应用程序。

我读到不使用的原因之一是因为XSS漏洞。localStorage

由于 React 会转义所有用户输入,现在使用起来安全吗?localStorage


答案 1

在大多数现代单页应用程序中,我们确实必须将令牌存储在客户端的某个位置(最常见的用例 - 在页面刷新后保持用户登录)。

总共有 2 个选项可用:Web 存储(会话存储、本地存储)和客户端 Cookie。这两个选项都被广泛使用,但这并不意味着它们非常安全。

Tom Abbott很好地总结了JWT会话Storage和localStorage安全性

Web Storage(localStorage/sessionStorage)可以通过同一域上的JavaScript访问。这意味着在您的站点上运行的任何JavaScript都将有权访问Web存储,因此可能容易受到跨站点脚本(XSS)攻击。简而言之,XSS是一种漏洞,攻击者可以注入将在您的页面上运行的JavaScript。基本的XSS攻击试图通过表单输入注入JavaScript,攻击者将表单放入表单中以查看它是否由浏览器运行并且是否可以由其他用户查看。<script>alert('You are Hacked');</script>

为了防止XSS,常见的响应是对所有不受信任的数据进行转义和编码。React(大多数情况下)会为你做到这一点!这里有一个关于 React 负责多少 XSS 漏洞保护的精彩讨论

但这并不能涵盖所有可能的漏洞!另一个潜在的威胁是使用托管在CDN或外部基础设施上的JavaScript

这又是汤姆:

现代 Web 应用包括用于 A/B 测试、漏斗/市场分析和广告的第三方 JavaScript 库。我们使用像 Bower 这样的包管理器将其他人的代码导入到我们的应用程序中。

如果您使用的脚本中只有一个受到威胁,该怎么办?恶意JavaScript可以嵌入到页面上,并且Web存储受到损害。这些类型的 XSS 攻击可能会在不知情的情况下获取访问您网站的每个人的 Web 存储。这可能就是为什么一堆组织建议不要存储任何有价值的东西或信任Web存储中的任何信息。这包括会话标识符和令牌。

因此,我的结论是,作为一种存储机制,Web存储在传输过程中不会强制执行任何安全标准。任何阅读和使用Web存储的人都必须进行尽职调查,以确保他们始终通过HTTPS发送JWT,而不是HTTP。


答案 2

基本上,可以将JWT存储在本地存储中。

我认为这是一个好方法。如果我们谈论的是XSS,使用CDN的XSS,那么获得客户端登录/通行证的潜在风险也是一个潜在的风险。将数据存储在本地存储中至少可以防止CSRF攻击。

您需要同时了解这两者并选择所需的内容。这两种攻击都不是您需要注意的全部,请记住:您的整个应用程序的安全性仅与应用程序中最不安全的点一样安全。

再次存储是可以的,容易受到XSS,CSRF的攻击,...不是