쿠키

브라우저에 저장되는 작은 크기의 문자열(최대 4KB)

쿠키 특징

• 주로 서버에서 사용

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

• 요청 시 Headers에 전송
  • 같은 도메인에서 만들어진 쿠키만 정송
• 만료 기간 지정 가능
  • Expires, Max-Age 둘 다 전송된다면 Expires는 무시됨

Set-Cookie: <cookie-name> = <cookie-value>; Expires=<date>
Set-Cookie: <cookie-name> = <cookie-value>; Max-Age=<number>

• 만료기간에 따라 영구 쿠키와 새션 쿠키로 나눔

  영구 쿠키 (Persistent Cookie)	세션 쿠키 (Session Cookie)
  만료 기간 O	만료 기간 X
  만료 기간이 끝난 후 삭제	브라우저 종료 시 삭제

• 쿠키 종류

  퍼스트파트 쿠키 (First party Cookie)	서드파티 쿠키 (Third party Cookie)
  같은 도메인 naver.com	다른 도메인 facebook.com
  서브 도메인 m.naver.com	-

• 서드파티 쿠키

  • 스크립트, 이미지, 폰트, 아이프레임 등 다른 도메인으로 요청을 해야하는 경우에 생성됨
  • 주로 광고 목적으로 사용됨

쿠키의 문제점

CSRF	사용자의 권한을 이용한 공격 (비밀번호 변경, 결제 요청 등)
XSS Reflected XSS Stroed XSS Dom-based XSS	사용자의 민감한 정보 탈취(토큰)
부족한 저장 용량	4KB
HTTP 요청 시 자동으로 모든 쿠키 전송	불필요한 트래픽 증가

웹 스토리지

웹 스토리지는 HTML5에서 추가된 저장소.

웹 스토리지 특징

5MB의 저장 용량	쿠키의 부족한 저장 용량 문제 해결
요청 시 Headers에 전송하지 않음	쿠키의 CSRF, 트래픽 문제 해결
문자열만 저장 가능	직렬화를 통해 객체 저장 가능

로컬 스토리지와 세션 스토리지

• key - value 스토리지의 형태

/	로컬 스토리지	세션 스토리지
저장 범위	도메인 / 브라우저	도메인 / 브라우저 / 탭
데이터 영구	O (직접 삭제 시)	X (윈도우, 탭 닫을시 내용 제거)
사용방법	자동 로그인	일회성 로그인
주의사항	비밀번호와 같은 중요 정보는 절대 저장 X

웹 스토리지의 문제점

XSS	자바스크립트로 접근 가능
독립된 스토리지	브라우저 / 탭(세션 스토리지) 간 공유 불가
만료 기간 설정 불가
동기적 실행	메인 스레드 블로킹 용량이 크다면 IndexedDB 고려

Reference

우아한테크코스 테코톡