Internship at ABACUS digital Part 2: How JWT should be stored ?

Pisit Wongsripisant
ABACUS digital
Published in
3 min readAug 11, 2023

--

Nowadays, JSON Web Tokens (JWT) have become a popular choice for authentication in web applications. But the problem when I started my journey to use JWT is “how should I store JWT ?”. In this article, I would like to share a various ways to store JWT, including local storage, session storage, and cookies.

  1. Local Storage
Figure 1 : Local Storage in medium website
Figure 2 : Local Storage data is accessible via JavaScript

Local storage is a client-side storage that allows developers to store some data on the user’s browser. The key that good to know is Local storage data does not expire.

This is very convenient to store JWT but it has some security concerns. Since data stored in local storage is accessible via JavaScript, it is vulnerable to Cross-Site Scripting (XSS) attacks and your JWT could be stolen.

2. Session Storage

Figure 3 : Session Storage in medium website
Figure 4 : Session Storage data is accessible via JavaScript

Similar to Local Storage, Session Storage is also a client-side storage but with one important difference — it is limited to the current session.

When the user closes the browser tab or the session expires, the data stored in Session Storage is cleared.

This could be a better way to store JWT, since this reduces the duration of token to be exposed but it still vulnerable to Cross-Site Scripting (XSS) attacks as same as Local Storage.

Figure 5 : Session Storage : youtube playback speed

Another interesting example is that youtube playback speed data is also stored in Session Storage, which mean every videos you watch will remain this custom speed you have set in the latest video until you change speed or close the browser tab.

3. Cookies

Figure 6 : Cookie in medium website
Figure 7 : Only cookies with option HttpOnly=false are accessible via JavaScript

Cookies have long been a popular choice to store authentication tokens. There are many options that we can set in cookies to store data in more secure way. Here are the options that I would like to mention in this article.

HttpOnly — Cookies can be set with HttpOnly option, meaning they are accessible only by the server and not by JavaScript on the client-side as shown in Figure 7. This option significantly mitigates the risks of XSS attacks.

Secure — This flag ensures that the browser sends the cookie only over secure (HTTPS) connections. By doing so, we can protect the token from being intercepted during transit.

SameSite — This attribute helps protect against Cross-Site Request Forgery (CSRF) attacks. When a cookie is set with the SameSite attribute, the browser can send the cookie to only the same site that originated the request. This prevents the cookie from being sent along with requests originating from other websites.

Conclusion

Selecting the appropriate solution to store JWT is important to maintain the security of your web application. While local storage and session storage are convenient, they should be avoided for storing sensitive information due to XSS vulnerabilities. Cookies, especially HttpOnly cookies, offer a more secure option and you can also consider Secure and SameSite option too.

--

--