使用ReactJS将JWT存储在local存储中是否安全？

Question

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

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

由于 React 会转义所有用户输入，现在使用 localStorage 是否安全？

Answer 1

我知道这是一个古老的问题，但根据@mikejones1477所说，现代前端库和框架逃避了文本，为您提供了针对XSS的保护。Cookie不是使用凭据的安全方法的原因是，当localStorage阻止CSRF时，Cookie不会阻止CSRF（还请记住，cookies也可以通过JavaScript访问，所以XSS不是这里的大问题），这个答案继续说明原因。

将身份验证令牌存储在本地存储中并手动将其添加到每个请求中可以防止CSRF的原因是关键字：手动。由于浏览器不会自动发送该身份验证令牌，因此如果我访问 evil.example 并且它设法发送 POST http://example.com/delete-my-account，它将无法发送我的 authn 令牌，因此请求将被忽略。

当然，http只有是圣杯，但是你不能从reactjs或你旁边的任何js框架访问仍然有CSRF漏洞。我的建议是本地存储，或者如果你想使用cookie，请确保像Django一样实现一些CSRF问题的解决方案。

关于CDN，请确保您没有使用一些奇怪的CDN，例如像Google或bootstrap提供的CDN，由社区维护并且不包含恶意代码，如果您不确定，您可以自由查看。

Answer 2

基本上可以把你的JWT保存在你的本地存储器中。

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

您需要了解两者并选择您想要的。这两种攻击都不是您需要注意的全部，请记住： 整个应用的安全性仅与应用最不安全的点一样安全。

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

Answer 3

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

共有2个选项可用：Web存储（会话存储、本地存储）和客户端cookie。这两个选项都被广泛使用，但这并不意味着它们非常安全。

Tom Abbott很好地总结了JWT会话存储和本地存储安全：

Web存储（localStorage/sessionStorage）可以通过JavaScript在同一域上访问。这意味着在您的站点上运行的任何JavaScript都可以访问web存储，因此很容易受到跨站点脚本（XSS）攻击。简而言之，XSS是一种漏洞，攻击者可以在其中注入将在您的页面上运行的JavaScript。基本XSS攻击试图通过表单输入注入JavaScript，攻击者将＜code＞

为了防止XSS，常见的响应是转义和编码所有不受信任的数据。React（主要）为你做到了！这里有一个关于React负责多少XSS漏洞保护的讨论。

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

汤姆又来了：

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

如果您使用的脚本中只有一个被泄露了怎么办？恶意JavaScript可以嵌入页面中，Web存储受到威胁。这些类型的XSS攻击可以让访问您站点的每个人的Web存储在他们不知情的情况下访问您的站点。这可能就是为什么许多组织建议不要在网络存储中存储任何有价值的东西或信任任何信息。这包括会话标识符和令牌。

所以我的结论是，Web存储作为一种存储机制，在传输过程中并不强制执行任何安全标准。任何读取和使用网络存储的人都必须尽职尽责，确保他们总是通过HTTPS而不是HTTP发送JWT。