15

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!

Vasileios Tsakalis
  • 1,101
  • 2
  • 11
  • 25
  • jwt token is per user. environmental variable is per server. Idk how u want to use them for jwt tokens.. – Aldarund Dec 07 '18 at 16:31
  • @Aldarund Take a look on this: https://nuxtjs.org/api/configuration-env/ . By the way do you prefer cookies or localStorage for JWT storing? – Vasileios Tsakalis Dec 07 '18 at 17:39
  • and as i said its env for per server. You cant store individual user tokens there :) – Aldarund Dec 07 '18 at 18:46
  • If you want other answers, there are great discussions here too : https://stackoverflow.com/questions/27067251/where-to-store-jwt-in-browser-how-to-protect-against-csrf – Allenile Dec 15 '22 at 13:49

1 Answers1

18

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 using cookies, is that the attacker doesn't know the exact value of cookie which is 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 no 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 and man in the middle attacks. Also Django uses two cool method for handling this situations (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.

Reza Torkaman Ahmadi
  • 2,958
  • 2
  • 20
  • 43
  • Wow, really nice and detailed answer Reza! Personally i prefer cookies with httpFlag because you can prevent more easily CSRF attacks, i mean it's more under control, on the other hand XSS it's a big mess, it's not all under control, very good example is what you told about external scripts from CDN, scripts for Ads, tracking scripts for marketing purposes and general scripts that can be vulnerable. Anyways depends on each developer but for me the RULE is never trust Javascript. :) Have a nice day! – Vasileios Tsakalis Dec 07 '18 at 19:42
  • By general I can say, If your sure that your code is not vulnerable to XSS and framework is updated with no xss reported yet, then localStorage could be the best option, But if you even have a little possibility of that, then use Cookie but implement it completely. Cause lot's of new attacks are reported for it nowadays (check blackhat talks) – Reza Torkaman Ahmadi Dec 08 '18 at 02:02
  • Good answer, personally I'm a bit paranoid when it comes to storing secrets, against CSRF it's easy to protect, however against XSS it's almost impossible. I usually go with cookies. – kataik Apr 25 '19 at 21:49