[Web] cookie

Cookie

쿠키는 name, value 형태로 클라이언트(client)에 저장되는 작은 데이터 파일이다.
서버에서 HTTP response header에 Set-Cookie 속성으로 클라이언트에 정보를 제공한다.

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

쿠키 정보로 이름, 값, 만료 날짜/시각(쿠키 저장 기간), 경로 등을 포함한다.
쿠키는 클라이언트의 상태정보를 로컬(local)에 저장했다가 요청(request)할 때 참조된다.
서버측에서 만료기간을 지정하여 정해진 기간동안 상태 정보를 유지할 수 있다.
예) 로그인 상태 유지

실제 웹 페이지 상의 쿠키 데이터 확인하기

개발자 도구를 통해 실제 쿠키 데이터를 확인해보자.

개발자 도구(command+shift+I) -> Application -> Storage -> Cookies

Session Cookie vs. Persistent Cookie

• Session Cookie (세션 쿠키)
  • 만료 시각을 지정하지 않은 경우
  • 메모리에 있는 동안 유효
  • 브라우저 메모리에 저장되므로 현재 세션이 종료되면 쿠키는 사라짐
    • 브라우저는 "현재 세션"이 끝나는 시점을 정의
    • 어떤 브라우저들은 재시작할 때 세션을 복원해 세션 쿠키가 무기한 존재할 수 있도록 함
  • 구글 크롬 같은 메모리에 저장되므로 보안에 유리
• Persistent Cookie (지속 쿠키)
  • 만료 시각을 지정하는 경우
    • Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제
  • 프로세스가 종료(메모리가 사라지는 경우)되어도 지정한 만료 기간동안 유효
  • 파일로 저장되므로 브라우저가 종료되더라도 쿠키는 남음
  • 파일로 저장되는 특성 때문에 보안에 취약

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

Cookie Process

1. 클라이언트(유저)가 브라우저에서 웹 페이지에 접속한다.
2. 클라이언트가 요청한 웹 페이지를 응답으로 받으면서 HTTP 헤더를 통해 해당 서버에서 제공하는 쿠키 값을 응답 값으로 받는다.
3. 클라이언트는 해당 쿠키 정보를 저장한다.
4. 클라이언트가 웹 페이지를 요청한 서버에 재 요청시 받았던 쿠키 정보를 HTTP 헤더에 담아서 요청한다.
5. 서버는 클라이언트의 요청에서 쿠키 값을 참고하여 비즈니스 로직을 수행한다.

Cookie Example

• 자동 로그인
• 팝업창 정보 저장
  • "더 이상 열지 않음"
  • "오늘 하루 더 이상 열지 않음"
  • "한달간 표시 안함"
  • "비밀번호 지금 변경하기"
  • "비밀번호 다음에 변경하기"
  • "비밀번호 다음 로그인 시 변경하기"
• 소비자 행태 정보
  • 특정 페이지 클릭(유입)
  • view, click
  • 구매
  • 장바구니
  • 찜하기

Cookie

Chrome Platform Status > Feature: Cookie size limits

• 클라이언트에 최대 300개까지 쿠키 저장
• 서버 도메인 하나당 최대 20개의 쿠키 저장
• 쿠키 하나당 최대 4KB 정보 저장

---

Reference

• https://jeong-pro.tistory.com/80
• https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies