Where is safest to store Json Web Tokens JWTs in client side?

Question

Hello stackoverflow community!

We build an SPA app with nuxts.js framework and we arrived to the point which is the safest way to store a JWT token from our backend API service.

We have two options cookies with httpOnly flag versus localStorage. I read a ton of articles about the comparison of this two options, althought half of developers support cookies and half of developers support localstorage.

For my point of view cookies seems safer way than localStorage to store a JWT in client side but i wonder if there is even a safer way than the above options.

So i thought about something. Nuxt.js framework offer us the opportunity to store environmental variables. Is it safer to store a JWT token as an environmental variable or is exact the same like the above options or is even worst.

Thank you in advance!

Answer 1

You can't for sure say that cookies are preferred to localStorage. It really depends on how you implement your app, what framework you are using and what exactly you want to do. let me describe it more precisely.

Cookie with httpOnly:

Cookies, when used with the HttpOnly cookie flag, are not accessible through JavaScript.

When you store your jwt token in cookie and set it via http request set-cookie on browser, then the browser will send this credentials on each request. Of course you can secure it by applying httpOnly and secure flag for that cookie. So that no javascript will access it. But the problem is that you are opening the chance to CSRF attacks.

When the token is stored in a cookie, the browser will automatically send it along with each request to the same domain and this is still vulnerable to CSRF attacks.

localStorage:

On the other hand, jwt tokens are sent in Authorization header in each request. So browser doesn't set it automatically in your requests. it should be set on each request via javascript on client-side.

So basically because the browser doesn't add automatically to each request, it's not vulnerable to CSRF by default.

But the problem comes when your client code is vulnerable to XSS. In that case, because you store your credentials on localStorage, Then attacker will have full control over client side and can do anything. The difference in storing in cookie, is that, attacker doesn't know the exact value of cookie which are stored with httpOnly flag. But he could send requests with that http headers.

---

So in my opinion it depends on following situations:

• you want to save jwt tokens in localStorage, be sure that you check all your inputs and validate them. Use a framework that is not vulnerable to XSS (for sure not framework can claim that, but at least use one that doesn't have reported CVEs recently). Also always update your client-side codes. Implement all security concepts like csp and ... Also be aware of what CDN you are using and be careful of which library you are using.

• you prefer to use cookie and set credentials via Cookie on browser. Then be careful to implement anti-csrf mitigation techniques. always use https and set secure flag. be careful attacks that exist on cookie like subdomain attacks and man in the middle attacks. Also Django uses two cool method for handling this situaions (read more about it here)

  • Double-Submit Cookie
  • Synchronizer Token

final note: I don't think there is a general solution for this topic and anyone can suggest based on it's experiments and knowledge. BY the way, I prefer localStorage to store credentials received from Rest APIs. But i really be glad if anyone could correct me for a better solution.