Where to store authorization (or JWT) tokens on the web browser based clients?

Question

The question still remains where do we have to store the JWT tokens so that our AJAX requests from Javascript can use them in the Authorization headers. I looked at the following resources. Some suggest to use SessionStorage or LocalStorage and some say that they are unsafe, but don't recommend an alternative either. Also, some (link 3) suggest to store it as httpOnly cookies which obviosuly is not a solution for Single Page Applications. So, if we store them as non httpOnly cookies, its almost same as localStorage.

1. How do I store JWT and send them with every request using react

2. Please Stop Using Local Storage (https://dev.to/rdegges/please-stop-using-local-storage-1i04)

3. https://blog.logrocket.com/jwt-authentication-best-practices/

I know probably there isn't a particular solution to this problem, but strategies used in production settings to work around this problem may help.

Answer 1

As security is your primary concern, then the answer is relatively simple: you can't supply a JWT as an authorization header to your server-side application. To do so would require the use of a Javascript-accessible object, meaning that the JWT is at risk of an XSS attack.

The only secure method available at present is to generate that token via your server application, then supply that token to your client-side SPA via a httpOnly, Secure cookie. Arguably, this cookie is now potentially vulnerable to CSRF, but this may be considered a lesser risk than XSS.

With each subsequent AJAX request, that cookie will then be automatically supplied by the browser. Your server application (or application server) must also be configured to accept the JWT via that specific cookie.

This technique works for any application - Single Page Application or otherwise - that is looking to protect requests to server-side resources.