🍪 쿠키에 대해

• 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!

개발자로 전향하고 첫 회사에 입사했을 때 쿠키의 특성을 잘 몰라서 로그인 방식에 대해 어려움을 겪은 기억이 있다.

지금은 당연하지만 그 때는 쿠키의 생명주기, 도메인 범위, SameSite같은 개념이 왜케 헷갈렸는지... 🥲

---

쿠키(Cookie)의 유래

영어 단어로는 우리가 먹는 그 쿠키 맞다! 😋

진짜 먹는 쿠키와 관계 있냐고? 있다. 아주 간접적으로.

쿠키라는 이름은 1970년대 유닉스 시스템에서 쓰이던 magic cookie라는 개념에서 왔다.
magic cookie는 “작은 데이터 조각을 주고받으며 상태를 기억하게 해주는 토큰” 같은 개념이었다.

현대 웹에서의 쿠키도 비슷한 역할을 하기 때문에 이 이름을 그대로 가져다 쓴 것!

그럼 ‘왜 하필 쿠키?’ 🍪

1. 이름이 귀엽고 기억하기 쉬워서
2. 작고 맛있게(?) 생긴 데이터 덩어리 같아서
3. 포춘 쿠키처럼 안에 뭔가 정보가 들어있다는 상징성 때문에

정확한 기원은 정설이 없지만, 어쨌든 지금의 쿠키는 진짜 중요한 정보를 담고 있는 웹 생태계의 베스트셀러 간식(?)이다.

쿠키의 정의

• 웹 서버가 생성해서 브라우저로 전송하는 작은 텍스트 파일
• 클라이언트의 로컬 저장소 (주로 하드 디스크)에 저장되며
• 브라우저를 닫아도 만료시간 전까지는 유지
• HTTP 요청 시 자동으로 포함되어 전송
• HttpOnly 옵션을 주지 않으면 자바스크립트에서도 접근 가능

  alert(document.cookie); // 개인정보 털리기 딱 좋음!

• “name” = “value” 형식이며, 여러 개일 경우 세미콜론(;)으로 구분

쿠키의 주요 용도

1. 세션 관리
   • 로그인 정보, 인증 토큰, 사용자 상태 유지 등에 사용
2. 개인화
   • 장바구니, 테마 설정, 최근 본 상품 등 저장
3. 추적/광고
   • 방문 기록 분석, 사용자 행동 기반 광고 추적

쿠키의 동작 원리

1. 서버 -> 클라이언트 : Set-Cookie 헤더로 쿠키 전송
2. 클라이언트 -> 서버 : 이후 요청 시 Cookie 헤더에 자동 포함
3. 서버는 받은 쿠키를 바탕으로 사용자 식별

쿠키와 도메인

• 쿠키는 도메인(Domain) 기반으로 저장/전송
• 쿠키는 기본적으로 생성한 도메인에만 전송
  • test.com 에서 만든 쿠키는 naver.com 에 전송 안됨
  • www.test.com 과 test.test.com 도 서로 다르게 취급됨

https://www.test.com/api
- 'com' -> 최상위 도메인 (TLD)
- 'test' -> 2차 도메인
- 'www' -> 서브 도메인
- 'www.test.com' 은 'test.com'의 서브도메인!

SameSite vs SameOrigin (헷갈림 주의!)

• SameSite
  • 사이트 레벨에서 비교 (도메인 기준)
  • test.com 과 www.test.com → SameSite
  • test.com 과 naver.com → CrossSite
  • 쿠키 옵션 중 SameSite=Lax, Strict, None 등이 있음
• SameOrigin
  • 정확히 동일한 출처(origin) 비교
  • 프로토콜 + 도메인 + 포트 가 모두 동일해야 SameOrigin
  • 즉, https://test.com:443 과 http://test.com:443 은 CrossOrigin
  • CORS 문제는 여기서 발생함 🔥

서브 도메인과 쿠키

• 상위 도메인에서 만든 쿠키는 서브 도메인에서도 접근 가능
• www.test.com 이나 test.test.com 은 test.com 에서 만든 쿠키를 사용할 수 있음

localhost의 특수성

• 일반적으로는 안 되는 특수한 경우다! 왜냐면 localhost는 127.0.0.1 을 나타내는 루프백이기 때문
• 쿠키는 RFC 6265 의 5.1.3 도메인 규칙에 따라 쿠키를 생성한다
  1. 도메인 문자열은 문자열의 접미사일 것
  2. 문자열에 포함되지 않은 마지막 문자는 “.” 일 것
  3. 문자열은 호스트 이름일 것
• localhost 를 localhost.com 으로 변경하면 해결 가능

  sudo vim /etc/hosts
  
  127.0.0.1 localhost.com
  127.0.0.1 bank.localhost.com

• 단 이렇게 하면 크로스 도메인 처럼 인식돼서 CORS 문제가 발생할 수 있음! -> 🛑 개발 환경에서는 주의

---

마무리

• AWS CloudFront를 사용할 경우 실수하지 말아야 할게 .cloudfront.net 은 보안 정책상 쿠키 설정이 제한될 수 있음
• 쿠키 기반 인증이나 상태 저장이 필요하다면, CloudFront 앞단에서 맞춤 도메인 설정이 필요!

& 참고 자료

HTTP 쿠키 (MDN)
쿠키란? 쿠키의 정의