Web Storages and Cookies
While I was implementing the login feature, I was wondering what the best practice would be regarding where to store the JWT token.
Local Storage & Session Storage
There are two types of storage in web:
sessionStorage. These two allow saving key-value pairs within the browser (up to 5MB). The difference between these two is the lifecycle of persisted data.
The data saved in
sessionStorage will be cleared when a user refreshes the page or reopens the browser. Also, if there are multiple tabs of the same page, each tab will have an isolated storage.
On the other hand, all data saved in
localStorage stays persisted even if a tab or browser is closed. The data is also shared across the tabs. This all applies as long as a same browser on a same computer is used. If a computer has different browsers installed, each browser will have an isolated
But then, what are Cookies?
A cookie is a small piece of data (max 4K after encoding) that a server sends to a user’s web browser. If server puts
Set-Cookie header in HTTP response, the browser will store the values as cookies. Also, stored cookies are forwarded in
Cookie header in future HTTP requests to the server.
- path: Only sites that are on the same path or sub-path can access a cookie with
domainattribute specifies the which host domain can access a cookie. If this attribute is not set, only the domain who set the cookies can access them. Also, cookies are available in subdomains.
- expires & max-age: Session cookies, which are deleted when the current session ends, can be created without defining
max-ageattribute. Permanent cookies are deleted after the date specified by
expiresattribute or after some time specified by
- secure: A cookie with
secureattribute is sent to the server over HTTPS protocol only. Also, insecure sites that starts with
http://cannot set a cookie with
- httpOnly: A cookie with
httpOnlyattribute cannot be accessed via
- samesite: This attribute is to protect against cross-site request forgery (CSRF) attacks. With
none, all cookies can be sent from the same site and cross site with different domains. With this attribute set as
strict, cookies cannot be sent from cross site. With
lax, it works like strict but has some exceptions. It allows for safe HTTP methods such as
GETand for top-level navigation such as
WebStorage can be great storing client side data while it can hold more data compared to cookies. Cookies can be useful for storing server side data because it automatically sends requests to the server. On top of that we looked into how different attributes of a cookie can help with security. These should be considered based on the application’s needs and usages.
Using HTTP cookies - HTTP | MDN
An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user's web browser. The…
Understanding "same-site" and "same-origin"
Updated "same-site" and "same-origin" are frequently cited but often misunderstood terms. For example, they are…
쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부입니다. 쿠키는 주로 웹 서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더(header)의…