Why Cookie is preferable compared to localStorage when it comes to authentication ? (2024)

We know about JWT, or JSON Web Token, as an industry standard RFC 7519 method for representing claims securely between two parties. JWT is very common nowadays. But where should we store them in the front end?

In this article, I will break down 2 common places to store tokens. Cookies and LocalStorage

Local Storage

To use localStorage, just simply call use the localStorage object

localStorage.setItem("yourTokenName", yourToken)
localStorage.getItem("yourTokenName", yourToken)

Pros:

• Very convenient, don’t need any backend, just pure JavaScript.
• Big Data size, about 5mb.

Cons:

• Vulnerable to XSS attacks. An XSS attack happens when an attacker can can take the access token that you stored in your localStorage because they can run JavaScript on your website.

Cookies

To set cookie , we can do:

document.cookie = "cookieName=value"

or do this with http request:

Set-Cookie: <cookie-name>=<cookie-value>

Pros:

• If you’re using httpOnly and secure cookies this means that your cookies cannot be accessed using JavaScript so even if an attacker can run JS on your site, they can't read your access token from the cookie.
• Can set expiration date

Cons:

• Only 4kb of storage

XSS Attacks

Like I said above, local storage is vulnerable because it’s easily accessible using JavaScript and an attacker can retrieve your access token. However, while httpOnly cookies are not accessible using JavaScript, this doesn't mean that by using cookies you are safe from XSS attacks involving your access token.

If an attacker can run JavaScript in your application, they can just send an HTTP request to your server which will automatically include your cookies; It’s just less convenient for the attacker because they can’t read the content of the token although they might don’t have to.

CSRF Attacks

Cross-site request forgery (also known as CSRF) is a web security vulnerability that allows an attacker to induce users to perform actions that they do not intend to perform.

However, this can be mitigated easily using sameSite flag in your cookie by including an anti-CSRF token.

Cookies still have some vulnerabilities but it’s preferable compared to localStorage whenever possible. Because:

• Both localStorage and cookies are vulnerable to XSS attacks, but it's harder for the attacker to do the attack when you're using httpOnly cookies.
• Cookies are vulnerable to CSRF attacks, but it can be mitigated using sameSite flag and anti-CSRF tokens.
• You can still make it work, even if you need to use the Authorization: Bearer header or your JWT is larger than 4KB.