For Angular applications where should I store the JWT Tokens those are generated from Auth Server?

Question

I have an application that has a login page ( user name and password). Once authenticated successfully I receive the access_token, expiration, refresh token and other claims from the auth server.

Where do I need to store those tokens in the browser so that for the other API request I can pull the access_token and attach to the header of the API?

Is it good practice and safe to store those tokens in localStorage of the browser?

Because those tokens are exposed when we look at them in Developer tools (chrome).

Sanderson

Answer 1

In short, it's OK to store token in Local Storage.

• Why? You need to understand XXS (cross-site scripting) attacks. Local Storage is only accessible to JavaScript code that runs on your domain. An XXS attack happens when malicious JavaScript code gets on to your site, and steal your token from local storage. Where can these malicious code come from? Source 1: CDN and third party libraries. Don't use sketchy third party code and you will be fine. Source 2: Hackers post malicious code on your site using <script> tag. You don't have to worry about this, since Angular ignore all <script> tag.
• You probably heard of XSRF/CSRF(Cross-Site Request Forgery) attack. Only worry about this when you use cookies to store token. It happens when the hacker sends user a post request link of your site, and the user click on it. Since the browser always send the cookies that are in the same domain, the hackers post request get authenticated.

You can do some search on XSS and XSRF on your own. Very interesting subject.

Ceolaceorl

"Don't use sketchy third party code and you will be fine" I'm not sure this is the case in 2022. Lots of people are trying to address this problem because it is wreaking havoc. It's a very serious attack vector with not good solutions at the moment. – Instillation