使用 ReactJS 将 JWT 存储在 localStorage 中是否安全? [英] Is it safe to store a JWT in localStorage with ReactJS?

问题描述

我目前正在使用 ReactJS 构建单页应用程序.

I'm currently building a single page application using ReactJS.

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

I read that one of the reasons for not using localStorage is because of XSS vulnerabilities.

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

Since React escapes all user input, would it now be safe to use localStorage?

推荐答案

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

In most of the modern single page applications, we indeed have to store the token somewhere on the client side (most common use case - to keep the user logged in after a page refresh).

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

There are a total of 2 options available: Web Storage (session storage, local storage) and a client side cookie. Both options are widely used, but this doesn't mean they are very secure.

Tom Abbott 很好地总结了 JWTsessionStorage 和 localStorage 安全:

Tom Abbott summarizes well the JWT sessionStorage and localStorage security:

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

Web Storage (localStorage/sessionStorage) is accessible through JavaScript on the same domain. This means that any JavaScript running on your site will have access to web storage, and because of this can be vulnerable to cross-site scripting (XSS) attacks. XSS, in a nutshell, is a type of vulnerability where an attacker can inject JavaScript that will run on your page. Basic XSS attacks attempt to inject JavaScript through form inputs, where the attacker puts <script>alert('You are Hacked');</script> into a form to see if it is run by the browser and can be viewed by other users.

为了防止 XSS，常见的反应是对所有不受信任的数据进行转义和编码.React(主要)为你做这件事！这是一个很好的关于 React 负责多少 XSS 漏洞保护的讨论.

To prevent XSS, the common response is to escape and encode all untrusted data. React (mostly) does that for you! Here's a great discussion about how much XSS vulnerability protection is React responsible for.

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

But that doesn't cover all possible vulnerabilities! Another potential threat is the usage of JavaScript hosted on CDNs or outside infrastructure.

汤姆又来了:

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

Modern web apps include 3rd party JavaScript libraries for A/B testing, funnel/market analysis, and ads. We use package managers like Bower to import other peoples’ code into our apps.

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

What if only one of the scripts you use is compromised? Malicious JavaScript can be embedded on the page, and Web Storage is compromised. These types of XSS attacks can get everyone’s Web Storage that visits your site, without their knowledge. This is probably why a bunch of organizations advise not to store anything of value or trust any information in web storage. This includes session identifiers and tokens.

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

Therefore, my conclusion is that as a storage mechanism, Web Storage does not enforce any secure standards during transfer. Whoever reads Web Storage and uses it must do their due diligence to ensure they always send the JWT over HTTPS and never HTTP.

这篇关于使用 ReactJS 将 JWT 存储在 localStorage 中是否安全?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！