Local storage vs Cookie

브라우저 환경에서 데이터를 저장해 사용할 수 있는 공간으로 Local storage와 Cookie가 있습니다.

프론트엔드 작업을 하다보면 흔히 Local storage를 이용하는데, 그렇다면 localStorage가 cookie보다 항상 좋은 것일까요?

 

웹앱이 JWT를 사용하는 경우 토큰을 어디에다 저장해야 하는 걸까요?

Local Storage

localStorage는 자바스크립트를 이용해 데이터를 읽고 저장할 수 있습니다.

localStorage.setItem("data", data)
localStorage.getItem("data", data)

 

localStorage는 매우 편리하고 순수 자바크스립트만으로 제어할 수 있다는 것이 장점입니다.

그리고 저장용량이 약 5메가 바이트로 쿠키에 비해 널널한 저장 공간을 가지고 있죠.

 

반면 XSS 공격에는 취약합니다. 위에서 자바스크립트로 제어할 수 있다고 했죠? 따라서 해커가 XSS 공격을 하면 데이터를 탈취당할 위험이 있습니다.

Cookie

Cookie는 document api를 이용합니다.

document.cookie = "cookieName=value"

 

혹은 http 요청에 아래와 같이 활용할 수 있습니다.

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

 

쿠키는 보안 측면에서 local storage보다 나은 점들이 있습니다. 쿠키는 자체 보안 장치들이 구비되어 있습니다. "HttpOnly" 플래그를 설정하면 클라이언트의 자바스크립트가 쿠키의 내용에 접근하는 것을 막을 수 있습니다. "Secure" 플래그를 함께 설정하면 HTTPS 통신에만 사용가능하도록 보장되어 네트워크 기반 공격에 추가적인 보안을 줄 수 있습니다. 그리고 쿠키는 expiration time을 설정해 일정 기간이 지나면 자동적으로 expire 시킬 수도 있습니다.

 

하지만 단점으로는 4킬로바이트의 저장용량밖에 가지지 못합니다.

저의 경우 Access token의 경우 Local Storage를 통해 관리하고,

Refresh token의 경우 Cookie를 통해 관리합니다.

 

이렇게 되면 설사 해커가 XSS 공격으로 정보를 탈취해도 Access token의 만료기간이 짧기 때문에 피해를 최소화할 수 있기 때문입니다.

 

 

참조: https://levelup.gitconnected.com/why-cookie-is-preferable-compared-to-localstorage-when-it-comes-to-authentication-b43ac5610be6

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