Is it safe to store a JWT in localStorage with ReactJS?

by

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).

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 summarizes well the JWT sessionStorage and localStorage security:

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.

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.

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

Here’s Tom again:

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.

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.

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.

More Related Contents:

  1. Do I have to store tokens in cookies or localstorage or session?
  2. useEffect does not listen for localStorage
  3. How to Protect website code PHP / JS? [closed]
  4. “SyntaxError: Unexpected token < in JSON at position 0"
  5. Invalidating JSON Web Tokens
  6. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  7. React – changing an uncontrolled input
  8. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  9. How to display binary data as image in React?
  10. How do you send images to node js with Axios?
  11. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  12. How to add custom html attributes in JSX
  13. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  14. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  15. How to make Puppeteer work with a ReactJS application on the client-side
  16. body data not sent in axios request
  17. Fetch image from API
  18. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  19. How do I add validation to the form in my React component?
  20. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  21. React.js Serverside rendering and Event Handlers
  22. Matched leaf route at location “/” does not have an element
  23. unable to deploy next js to azure
  24. Increase JavaScript Heap size in create-react-app project
  25. Webpack 5 – Uncaught ReferenceError: process is not defined
  26. ReactJS server-side rendering vs client-side rendering
  27. How to deploy a React + NodeJS Express application to AWS?
  28. Access from origin ‘https://example.com’ has been blocked even though I’ve allowed https://example.com/
  29. Firebase-Admin, importing it to react application throws Module not found error
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment