反应并在本地存储中存储jwt令牌 [英] React and storing jwt token in localstorage

问题描述

我最近刚开始在react + express应用中使用jwt，并遇到了将jwt令牌存储在何处的问题.似乎两个主要选项是localStorage和cookie，它们都易于受到各种攻击(XSS和CRSF)的攻击.<​​/p>

但是我发现React应该是XSS安全的(解决方案

cookie和localStorage都是可以接受的选项，许多应用程序都使用它们.您需要了解他们的利弊，并选择最适合您的用例的

.

曲奇饼

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

localStorage

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

保持"XSS安全"

不是.对于开发人员来说，使它容易受到攻击可能更难，但是任何中等复杂度的React应用程序很可能都具有XSS漏洞. React绝对不受不同形式的XSS的影响.只要开发人员具有将用户输入插入DOM的众多选项，就会存在XSS，因为有时以使之起作用"的方式解决问题是最容易的.如果在您的应用中可行，Content-Security-Policy在现代浏览器中可能会有所帮助.尽管默认情况下React是相当安全的，但这确实是正确的，这意味着通常会没事的.这是目前任何现代框架的相当标准的要求，并不意味着React中的XSS是不可能的.是的.

最终，一般来说，存储在httpOnly cookie中的会话ID(具有正确实施的会话管理，例如，由您的语言或框架提供的会话管理)是最安全的 ，后跟httpOnly cookie中的令牌，但这还取决于您的威胁模型和确切的用例.

I just recently started using jwt in a react+express app and came across the issue of where to store the jwt token. It seems like the two major options are localStorage and cookies with both being venerable to various attacks (XSS and CRSF).

But i found that react is supposedly XSS safe (What does it mean when they say React is XSS protected?) so is it okay to use localStorage to store the jwt? If not whats the industry standard for this?

解决方案

Both cookies and localStorage can be acceptable options, and both are used by many apps. You need to be aware of their pros and cons and choose what fits your usecase the best.

Cookies

• Can be set as httpOnly, so javascript will not have access. This makes it impossible to access the token in an XSS attack. Note that this does not mean the app is not vulnerable to XSS. This only means then even in case of a successful XSS attack, the token will not be accessible to the attacker.
• It's necessary to explicitly protect your app against CSRF as auth info will be sent automatically with requests.
• Can only be sent to their origin (not to say APIs on different domains).
• The token could probably be replaced by a plain old session id in that cookie as your app is likely not really stateless anyway. It would reduce complexity and increase security.
• Cannot be used for access token storage in complex single sign-on scenarios with the identity provider having its own origin, and the app talking to several backends on different domains. In this case short-lived access tokens are usually stored in localStorage, with a longer-lived refresh token being set for the identity provider domain in a httpOnly cookie.

localStorage

• Can be accessed by javascript, which includes a successful xss attack.
• If the token is sent as a request header, no further protection is usually necessary against CSRF (the app is inherently protected, because authentication info is not sent automatically).
• Tokens can be sent to different origins. This is the main benefit, and the most important reason you would use localStorage, or JWTs in general. If you only want to send the token to your single app origin, you probably don't need JWTs at all, and definitely don't want to use localStorage.

React being "XSS safe"

It's not. It's probably harder for a developer to make it vulnerable, but any medium complexity React app will most likely have XSS vulnerabilities. React is in no way immune to different forms of XSS. As long as developers have a multitude of options to insert user input into the DOM, there will be XSS, because sometimes it's the easiest to solve problems that way to "make it work". Content-Security-Policy might help somewhat in modern browsers if feasible in your app. It's true though that React is pretty secure by default, meaning that usually it will just be ok. That's a fairly standard requirement of any modern framework now, and it does not mean XSS in React is not possible. It is.

Ultimately, a session id stored in a httpOnly cookie (with correctly implemented session management, eg. as provided by your language or framework) is the most secure in general, followed by a token in a httpOnly cookie, but it also depends on your threat model and the exact usecase.

这篇关于反应并在本地存储中存储jwt令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！