[백엔드/용어] 쿠키

쿠키 (Cookie)

사이트 들어가면 하단에 뜨는 '쿠키' 허용

 

• 쿠키는 유저의 설정과 과거 이용 내역을 담고 있음. (ex. 로그인 정보, 장바구니 정보)
• 쿠키는 유저 컴퓨터에 저장됨 ↔ 세션은 웹 서버에 저장.
• HttpOnly 옵션이 없으면 스크립트 언어로 쿠키 내용 수정이 가능 (보안에 취약)

 

왜 쿠키인가

— UNIX 프로그래머들이 값을 변경하지 않고 주고받는 데이터 패킷인 매직 쿠키에서 유래.

— 주고 받는 데이터 패킷이라는 점이 포인트.

 

매직 쿠키의 어원
— 얘는 먹는 포춘 쿠키에서 유래된 용어임.

 

즉, 쿠키의 어원은 포춘 쿠키다.

 

쿠키의 구조

1. 이름
2. 값
3. 0개 이상의 속성 (key-value).
4. 속성은 쿠키의 만료 기간, 도메인, 플래그(ex: Secure 및 HttpOnly) 등의 정보를 저장.

 

근데 쿠키를 왜 전송하나

— HTTP 통신은 Stateless(서버가 클라이언트의 세션 상태, 세션 정보를 저장하지 않음)라서 서버가 클라이언트에 대한 정보를 모르기 때문.

• 먹으면 클라이언트 정보를 알게 해주는 쿠키라서 이 쿠키를 서버에 먹여줘야 함.
• 쿠키는 누가 만드나? 서버가 만든 쿠키니깐, 지가 만든 쿠키가 누구 건지는 서버가 알겠지?

⇒ 즉, 클라이언트가 누구인지 구별하려고 전송하는 것.

 

"어? 근데 캐시인가 뭔가도 클라이언트에 있는 거 아닌가요?"

 

쿠키 ≠ 캐시 (Cache)

• 사이트의 이미지나 사운드를 일시적으로 저장해 뒀다가, 로딩을 빠르게 하는 게 캐시.

 

쿠키의 용량과 개수

• 대부분 txt파일 형태의 최대 4KB로 용량은 작은 편.— 쿠키의 개수 제한도 브라우저마다 다름 (50, 70, 150, 180, 600개 등)
• — 브라우저마다 쿠키 최대 크기가 다르지만 대부분은 4,096 bytes 정도.

 

웹 스토리지(Web Storage)

— 쿠키가 용량도 작고, 보안에도 취약해서 추가된 개념.

• 웹 브라우저에서 제공하는 정보 저장 공간.
  • 창을 닫으면 사라지는 세션 스토리지 (Session Storage)
  • 정보가 영구적으로 저장되는 로컬 스토리지 (Local Storage)
• 이걸로 이제 String 타입에 최대 5MB까지 저장이 가능해짐.
  • 근데 이것도 제한(브라우저마다 다름)이 있어서, 아예 대용량 저장이 가능하고 자료형 제한도 없는 IndexedDB 개념도 등장.

 

IndexedDB는 기코몽 블로그 포스팅 참고.

indexedDB에 대해 알아보자!

 

HTTP 통신(웹 통신)에서의 쿠키

— Set-Cookie HTTP 헤더를 통해 설정되고, 웹 서버의 HTTP 응답을 통해 송신.

HTTP 통신 과정

 

1. 클라이언트의 첫 request.
2. 서버는 2개의 Set-Cookie 헤더로 응답 [Cookie: theme=light; sessionToken=abc123]
   1. theme(세션 쿠키): Max-Age 속성이 존재하지 않아 브라우저 종료 시 삭제됨.
   2. session Token(영구 쿠키): Expires 속성이 포함돼서 특정 시간에 삭제됨.
3. 클라이언트는 그 쿠키를 저장하고, 두 번째 request.
4. — 브라우저는 request에 저장해둔 2개의 cookie를 포함함.
5. 쿠키를 받으면 서버는 이 요청이 이전 것과 관련이 있는지 알 수 있고, 그에 맞게 response.
6. — 새 쿠키 추가나 기존 쿠키 수정, 쿠키 삭제를 위해 response에 더 많은 Set-Cookie 헤더 포함 가능.

 

쿠키 옵션

• Expires : 쿠키 만료 날짜.
• Max-Age : 쿠키 수명. 이 옵션이 있을 경우 Expires 무시.
• HttpOnly : 자바스크립트에서 쿠키 접근 불가.
• Domain : 해당 도메인에서만 쿠키 전송 가능.
• Path : 해당 패스의 요청에서만 쿠키 전송 가능.

 

First-Party & Third-Party 쿠키

— 방문한 도메인에서 생성한 쿠키 & 다른 도메인에서 생성한 쿠키

이게 서버한테 먹이는 쿠키의 실체.

 

• First-Party 쿠키(자사 쿠키): 만약 사용자가 Amazon에 로그인하는 경우, 웹 브라우저는 이 데이터 파일을 사용자 컴퓨터의 "amazon.com" 도메인에 저장.
  • 자사 쿠키가 차단되면 방문마다 로그인, 항목 추가마다 장바구니 재설정.
• Third-Party 쿠키(제 3자 쿠키): 온라인 광고 목적으로 사용.
  • 스크립트나 태그를 통해 웹사이트에 배치됨.
  • 제 3자 쿠키는 제 3자 서버의 코드를 로드하는 모든 웹사이트에서 액세스 가능.

 

Second-Party 쿠키

— 데이터 파트너십을 통해 first-party 쿠키 만든 회사에서 다른 회사로 전송되는 쿠키.

• ex: 항공사는 광고 타겟팅에 사용하기 위해 자사 쿠키(및 이름, 이메일 주소 등 기타 자사 데이터 )를 신뢰할 수 있는 호텔 체인에 판매.