Published in · 2 min read · Dec 21, 2022
--
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
andsecure
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 usinghttpOnly
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.