Cookie와 Web Storage의 각 저장소, 언제 사용하는 것이 좋을까?

0. 쿠키, 웹 스토리지(로컬 스토리지 / 세션 스토리지)는 왜 필요할까 ?

HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 가져 클라이언트의 상태를 보존하지 않습니다.

HTTP의 이러한 단점을 보완하고자 쿠키와 웹 스토리지를 통해 서버가 아닌 클라이언트의 사용자 정보 및 상태를 저장해두고 필요시마다 데이터를 꺼내서 서버의 전달하는 방식을 구현합니다.

쿠키(Cookie): 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 Key-value 형식의 저장소
웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기위해 만들어진 Key-value 형식의 저장소

1. 쿠키(Cookie)

클라이언트(브라우저) 로컬에 저장하는 만료기간을 가진 작은 텍스트파일로, 서버와 클라이언트가 주고 받은 내용을 기억하고 불러올수 있는 역할을 수행합니다.

만료 기간을 정할 수 있어 사용자 인증이 유효한 시간을 명시할 수 있고, 브라우저가 종료되어도 만료 기간 내에는 클라이언트에 보관되어 인증이 유지된다는 특징이 있습니다.

🍪 쿠키의 목적

1. 세션 관리 : 로그인, 사용자 정보, 접속 시간 등 서버가 알아야할 정보를 관리합니다.
2. 개인화 : 언어환경, 다크/라이트 모드 등 사용자 맞춤형 페이지를 제공합니다.
3. 트래킹 : 사용자 행동 및 패턴을 분석합니다.

🍪 쿠키 동작 원리

1. 클라이언트가 서버에 HTTP 요청
2. 서버가 HTTP 응답 시 set-cookie로 쿠키를 생성해 전달
3. 클라이언트는 전달받은 쿠키를 HTTP 요청헤더에 담아 데이터 요청 및 응답 받는다. (이때 쿠키는 브라우저에 저장된다)
4. 이때 쿠키가 만료되었다면, 클라이언트는 서버에 쿠키 갱신 요청을 통해 새로 발급 받는다.

🍪 쿠키의 구성요소

• 이름(Name) : 쿠키의 이름과 관련된 값
• 값(Value) : 쿠키의 이름과 관련된 값
• 유효시간(Expires) : 쿠키의 유지시간
• 도메인(Domain) : 쿠키를 전송할 도메인
• 경로(Path) : 쿠키를 전송할 요청 경로

🍪 쿠키의 종류

• Session Cookie : 메모리에만 저장되며, 만료기간이 있지만 브라우저 종료시 삭제되는 쿠키
• Peristent Cookie : 파일로 저장되며, Max-Age 설정을 통해 장기간 유지 가능하고 브라우저 종료와 관계없이 사용 가능한 쿠키
• Secure Cookie : HTTPS에서 사용되는 암호화된 쿠키로, 비교적 안전하지만 실질적 보안은 제공되지 않기에 민감한 데이터는 저장하지 않는 것이 좋다.
• Third Party Cookie : 다른 도메인에 요청이 필요할 때 생성하는 쿠키로, 주로 광고 목적으로 사용되며 유저 개인 개인정보 악용 문제가 발생할 수 있어 사용에 주의 해야 한다.

🍪 쿠키의 장점

1. 대부분의 브라우저에서 지원한다.
2. 데이터의 유효기간을 지정할 수 있다.
3. XSS(사이트간 악성 JS 코드를 심는 행위) 공격으로부터 안전하다
   • 서버에서 쿠키의 httpOnly 옵션을 설정하면, JS를 통해 쿠키에 접근하는 것을 막을 수 있다.

🍪 쿠키의 단점

1. 저장할 수 있는 데이터 용량이 매우 작다(최대 4kb)
2. 서버로 HTTP 요청시 매번 같이 전달되어야 해 서버와 네트워크 측면에 부담이 있다.
3. 쿠키 속 정보는 암호화되어 있지 않아 제 3자에게 탈취되어 악용될 수 있는 위험이 있다.
4. CSRF(사이트 간 요청 위조) 위협 존재하다.
   • CSRF : 제 3자가 사용자의 요청을 가로채 변조하여 부당 이익을 취하는 행위를 말한다.
5. 문자열만 저장 가능하다.

2. 웹 스토리지(Web Storage)

window 객체의 프로퍼티로 존재하기도 하는 웹 스토리지는 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소를 말합니다.

웹 스토리지로는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다.

📂 로컬 스토리지(Local Storage) vs 세션 스토리지(Session Storage)

두 스토리지는 영구성과 데이터 공유 범위로 구분됩니다. 먼저 로컬 스토리지는 브라우저를 종료해도 데이터가 영구적으로 보관됩니다. 반면 세션 스토리지는 브라우저 종료 시 데이터도 함께 삭제됩니다.

또한 로컬스토리지는 도메인이 같다면 전역적으로 데이터가 공유된다는 특성이 있으나, 세션 스토리지는 도메인이 같더라도 브라우저가 다르면(탭 브라우저, 다른 브라우저) 브라우저 컨텍스트가 다르기 때문에, 브라우저마다 각각의 세션 스토리지가 형성되어 데이터가 공유되지 않습니다.

	로컬 스토리지	세션 스토리지
데이터 유지	영구성(브라우저 종료 시 보관)	비영구성(브라우저 종료 시 삭제)
데이터 범위	동일한 도메인 전역 공유	브라우저간 공유 불가
접근	window.localStorage	window.sessionStorage

📂 웹 스토리지의 장점

1. 서버에 불필요하게 데이터를 저장하지 않아도 되어 서버 부담이 줄어듭니다.

2. 쿠키에 비해 데이터 용량이 큽니다.(모바일 : 2.5MB / 데스크탑 : 5~10MB)

3. 문자열은 물론 자바스크립트의 모든 원시형 데이터와 객체타입을 저장할 수 있습니다.

4. 도메인 단위로 접근이 제한되는 CORS 특성 덕에 CSRF위협으로부터 안전합니다.

📂 웹 스토리지의 단점

1. HTML5를 지원하는 브라우저에만 사용가능합니다.
2. JS코드를 통해 웹 스토리지에 쉽게 접근할 수 있어 XSS 공격에 취약합니다.

3. 각 저장소는 언제 사용할까.

• 쿠키 : 일시적으로 필요한 가벼운 데이터를 저장할 때

  • e.g. 다시보지않음 쿠키 팝업창, 로그인 자동 완성

• 로컬 스토리지 : 브라우저가 종료되어도 지속적인 데이터 저장이 필요할 때

  • e.g. 자동 로그인

• 세션 스토리지 : 브라우저가 종료되면 사라지는 일시적으로 데이터를 저장할 때

  • e.g. 일회성 로그인, 입력 폼 저장, 비로그인 장바구니

    
    

📎 참고문서

• 브라우저 저장소(로컬 스토리지, 세션스토리지, 쿠키)
• 쿠키, 로컬 스토리지, 세션 스토리지