Don't store it in local storage, that's definitely not secure. Cookies too aren't great; all those options are physically stored on the client.
The answer to how you should secure it very much depends upon the type of your app? Does it have a server back-end, or is it just a SPA with API end-points?
Generally the guideline seems to be to not to store the token at all, but get a one-use token each page load that stays in memory.
Take a look at some info Auth0 provide for guidelines that links through to some OIDC patterns for securely using tokens in different types of web apps.
With over 12 years of experience in development and a focus on application security Chris is on a quest to bring his knowledge to the masses, making application security accessible to everyone.
The recommendation to not store the token in localstorage here is a tricky one. In most SPAs, Javascript will need access to this token and there are two places to put it:
localhostrage
a non-HTTPOnly cookie
Both of these come with their own problems (XSS and CSRF, respectively) but in this case, the need outweighs the risk. The key to application security, though, is minimizing risk. So, if we add risk by putting it in localstorage, we need to add controls to minimize the risk elsewhere. To help protect from these other issues (XSS, CSRF, etc) you can follow some of the advice in this StackOverflow post: security.stackexchange.com/a/179507
Additionally, strong authorization controls on the backend help prevent issues with the token being stolen. This could even mean added the remote user's IP address as a custom claim in the JWT and verifying the request is coming from there. This would be difficult to spoof as the token is singled with a secret unknown to the attacker and would not verify if they changed the IP in the payload.
Most of the resources on Internet suggest to store JWT in httpOnly cookies. But I am confused, if we store the JWT in httpOnly cookies how can we perform AJAX api calls (that require authorization) using fetch or axios, since we cannot read httpOnly cookies. So, the only option is to store them in non-httpOnly cookies which are almost at the same level if we consider XSS. Am I right?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Don't store it in local storage, that's definitely not secure. Cookies too aren't great; all those options are physically stored on the client.
The answer to how you should secure it very much depends upon the type of your app? Does it have a server back-end, or is it just a SPA with API end-points?
Generally the guideline seems to be to not to store the token at all, but get a one-use token each page load that stays in memory.
Take a look at some info Auth0 provide for guidelines that links through to some OIDC patterns for securely using tokens in different types of web apps.
auth0.com/docs/security/store-tokens
The recommendation to not store the token in localstorage here is a tricky one. In most SPAs, Javascript will need access to this token and there are two places to put it:
Both of these come with their own problems (XSS and CSRF, respectively) but in this case, the need outweighs the risk. The key to application security, though, is minimizing risk. So, if we add risk by putting it in localstorage, we need to add controls to minimize the risk elsewhere. To help protect from these other issues (XSS, CSRF, etc) you can follow some of the advice in this StackOverflow post: security.stackexchange.com/a/179507
Additionally, strong authorization controls on the backend help prevent issues with the token being stolen. This could even mean added the remote user's IP address as a custom claim in the JWT and verifying the request is coming from there. This would be difficult to spoof as the token is singled with a secret unknown to the attacker and would not verify if they changed the IP in the payload.
Most of the resources on Internet suggest to store JWT in httpOnly cookies. But I am confused, if we store the JWT in httpOnly cookies how can we perform AJAX api calls (that require authorization) using fetch or axios, since we cannot read httpOnly cookies. So, the only option is to store them in non-httpOnly cookies which are almost at the same level if we consider XSS. Am I right?