[Security] Do not store auth token in localStorage

[mirorauhala]

It is not safe to store sensitive data in localStorage. LocalStorage is readable by JavaScript, which in this case has been its intended purpose. However that's not how you do a secure authentication system.

Consider the following:

• your platform has a feature for users to "post" text. This could lead to an XSS attack therefore compromising all tokens for every user.
  • your platform could make use of npm packages. This could lead you to an attack type where a dependency can manipulate data on your webpage. This leads to compromising of all tokens for every user. [1]
  • your platform could have links to 3rd party JavaScript. This could be analytics, advertisements, and/or JavaScript libraries like jQuery. An attack on their services could be an attack on yours. Therefore compromising all tokes for every user. (Remember: they may also use npm)
  • An user could have a malicious browser extension that can inject JavaScript and grab the token.

How to overcome this? Use cookies. Especially httpOnly cookies with the secure flag. They've been battle-tested for decades now. The httpOnly flag tells the browser to never give JavaScript access to the cookie value. The secure flag tells the browser to never send the cookie to an unencrypted site.

"But this wont work since we're using React, right?" Wrong. You can still serve your users a SPA site with a login page. The login page will make an XHR request to the backend API endpoint with the username and password as POST parameters. The server will respond with the user data if successful and with an error message if not.

That's it. That's how easy it is.

"Wait what happens if I reload the page?" Well the page will reload but you are still logged in. How? Well the magic is in the session cookie. The server sent you the user data on the body, but the header information contained the cookie which your SPA JavaScript never saw. The client browser just grabbed the cookie automatically and stores it. It also sends it back to the server an all further requests. If the session dies or is not set, the backend will respond with an error asking for authentication and the client can display it in a nice, meaningful way.

Additionally, the cookie most likely has to have SameSite flag set to Lax for this to work. One could also host the SPA page from static file host such as GitHub Pages or Amazon S3 but have the backend endpoint on a subdomain and on a separate server somewhere else. For that to be secure some CORS headers would be necessary.

[1] https://www.theregister.co.uk/2018/11/26/npm_repo_bitcoin_stealer/

[Kaltsoon]

You make really good points and I agree with you, HTTP only cookies would be a much safer choice. However, we have to understand that the focus of this course is not making a bulletproof authentication mechanism.

I think we should mention the dangers of storing sensitive data (such as access tokens in our case) in local storage but making bigger changes to the material would not be worth the effort.