Cookie & Session & Web Storege

Cookie(쿠키)

서버가 사용자의 웹 브라우저에 전송하는 key-value형태의 작은 데이터 조각
브라우저에 저장했다 동일한 서버에 재 요청시 쿠키 데이터를 전송

용도

• 세션 관리(Session management)
  서버에 저장해야 할 로그인 및 사용자 정보 등
• 개인화(Personalization)
  사용자 선호, 테마 등의 세팅
• 트래킹(Tracking)
  사용자 행동을 기록하고 분석하는 용도
  (서드파티 쿠키가 스크립트를 심어 쿠키 수집)

과정

1. 서버가 HTTP 응답과 함께 Set-Cookie 헤더를 전송
2. 쿠키는 브라우저에 저장
3. 동일 서버의 HTTP요청들의 Cookie 헤더안에 포함되어 전송(withCredentials: true)
4. 만료 시 쿠키 삭제
   • 세션 쿠키: 세션 만료 시 삭제(세션 복원시 무기한 존재)
   • Expires: 명시된 날짜에 삭제
   • Max-Age: 명시된 기간 이후에 삭제
5. 추가적으로, 특정 도메인 혹은 경로 제한 설정 가능
   • Domain:쿠키가 전송되게 될 호스트들을 명시(서브도메인 포함)
   • Path: 특정 경로로 제한

보안

• Secure: HTTPS 프로토콜 상에서 암호화된(encrypted ) 요청일 경우에만 전송
• HttpOnly: 브라우저에서 크키 정보에 접근 불가능

---

Session(세션)

상태 정보를 서버측에 저장하는 방법

용도

• 클라이언트측에서 접근하면 안되는 정보 관리

과정

1. 서버가 HTTP 요청의 Cookie 헤더에 sessionid가 없다면 응답의 Set-Cookie 헤더에 Set-Cookie: sessionid=12345 와 같이 세션id 담아 전송(Expires나 Max-Age 속성을 포함시키지 않아야 해당 세션 동안 유지)
2. 쿠키는 브라우저에 저장
3. 동일 서버의 HTTP요청들의 Cookie 헤더안에 포함되어 전송
4. 서버는 쿠키의 세션id별로 저장된 상태에 따라 동작

---

Web Storege

상태 정보를 브라우저에서 생성해 브라우저에 저장하는 방법

쿠키의 단점

• 크기, 갯수 제한(4KB, 도메인당 20개)
• 네트워크 오버헤드(쿠키는 모든 HTTP 요청에 포함)
• 보안 위험(브라우저와 서버 간에 주고받기 때문에 탈취 가능성)

웹 스토리지의 장점

• 크기(5MB)
• 네트워크 오버헤드 감소
• 보안 향상

---

LocalStorage

• 데이터를 브라우저에 영구 저장
• 오리진(도메인·프로토콜·포트) 별로 생성, 접근
• 지속적으로 필요한 데이터

SessionStorage

• 데이터가 세션 동안만 유지(브라우저 탭이 열려 있는 동안)
• 새로고침시 유지, 탭 닫으면 사라짐