🚀Cookies vs Localstorage

JWT 토큰을 어디에 저장해야할까?

팀원들과 로그인 구현에 대해 고민하며 JWT 토큰을 어디에 저장할지 의견이 나뉘었다. 지난번 로그인 방식에 대해 공부할 때 JWT vs Cookies&Seccsion 으로 구분하는 것으로 알고 있었기에 Cookies는 Session과 함께 사용하는 것이라고 생각을 했지만, Cookies라고 하는 것은 Localstorage 저장과 같은 하나의 저장 방식이었다.
역시 알아가는 맛!

둘 중 뭐를 사용해야할까?

cookie와 localstroge에 대해 구글링을 하면서, 실제로 이 두가지 방법에 대한 의견이 나뉜다는 것을 알았다. (우리만 고민하던 것이 아니었군...) 실제로 장단점이 있었다.

가장 중요한 것은 보안

먼저 로그인한 사용자의 경우 세션 토큰이 ID에 대한 프록시 역할을 한다. 이러한 토큰는 백엔드에 의해 발행되어 프런트 엔드로 전송되며, 프런트 엔드로 전송된다. 만약 토큰이 오용되거나 도난 당한다면, 공격자는 공격 대상자의 계정에 무단으로 접근할 수 있다. 따라서 공격이 수행될 수 있는 모든 가능한 방법의 위험을 최소화해야 한다.

각 방식의 장단점

Localstorage

- 장점 : 사용이 쉽다.
순수 자바스크립트이기에 사용이 편하다. Access token을 header에 넣어 API에서 사용할 수 있다.
- 단점 : XSS 공격에 취약하다.
XSS 공격은 공격자가 웹 사이트에서 Javascript를 수행할 수 있을 때 발생한다. 즉 공격자는 사용자가 Localstorage에 저장한 Access token을 가져올 수 있다.

Cookies

- 장점 : JavaScript를 통해 쿠키에 액세스할 수 없으므로 localStorage만큼 XSS 공격에 취약하지 않다.
httpOnly & secure cookies 를 사용하는 것은 공격자가 site에서 Cookie를 javascript 에 의해 엑세스될 수 없다는 것을 의미한다.
- 단점 : Token을 Cookie에 저장하지 못할 수도 있다.
1 . cookie의 용량은 4kb 이다. big size token을 저장하지 못할 수도 있다. (token이 4kb까지 될일이 잘 없다지만..)
2 . cookie를 server와 공유할 수 없는 상황들이 있을 수 있다. 이때 cookie를 사용할 수 없다.

결론은 Cookie!

종합해보면 Token을 저장할 때 httpOnly, secure cookie를 사용하는게 보안적으로 더 좋은 방법이라고 생각한다. 처음에는 단순히 token vs sesstion&cookie라고 생각했는데, cookie역시 하나의 저장소라고 생각하고 고민해볼 수 있는 기회였다.

참고
https://indepth.dev/posts/1382/localstorage-vs-cookies
https://supertokens.io/blog/cookies-vs-localstorage-for-sessions-everything-you-need-to-know