쿠키란?
사용자가 방문한 웹사이트에서 사용자의 브라우저에 전송하는 데이터
서버가 클라이언트에 데이터를 저장할 수 있고, 불러와 사용할 수 있는 수단이다.
쿠키를 사용하면 클라이언트의 상태를 기억하지 않고(무상태성) 연결을 유지하지 않는(비연결성) http의 특징으로 인한 번거로움을 해소할 수 있다.
쿠키 생성 과정
- 서버가 클라이언트로부터 요청을 받으면, (필요한 경우) 쿠키를 생성해서 요청한 내용과 함께 응답을 보낸다.
- 이때 응답 헤더의
Set-Cookie프로퍼티에 쿠키를 담아 클라이언트에게 전송한다.
- 이때 응답 헤더의
- 응답을 받은 클라이언트는 쿠키를 저장한다.
- 클라이언트가 동일한 도메인에서 서버에게 요청을 보낼 때 쿠키가 존재한다면 매번 쿠키와 함께 요청을 보낸다.
- 요청 헤더의
Cookie프로퍼티에 쿠키를 담아 서버에게 전송한다.
- 요청 헤더의
- 업데이트할 정보가 있다면, 서버는 업데이트한 쿠키를 요청한 내용과 함께 응답을 보낸다.
쿠키 종류
세션 쿠키: 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키. 브라우저를 종료하면 삭제된다.영속성 쿠키: 브라우저의 종료 여부와 관계없이 MaxAge/Expires 옵션에 지정된 시간만큼 저장되는 쿠키
쿠키 옵션
서버에서 쿠키를 보낼 때는 다음과 같은 옵션을 줄 수 있다.
Domain
쿠키가 전송될 호스트
클라이언트에서 서버로 쿠키를 보낼 때, 서버의 도메인과 해당 쿠키의 Domain 옵션값이 일치하는 경우에만 쿠키를 전송할 수 있다.
여기서 Domain은 포트, 서브 도메인 정보, 세부 경로를 포함하지 않는다.
다음과 같이 Domain 옵션을 지정한 경우
Domain: 'naver.com'이 쿠키는 Domain과 다른 google.com에 전송할 수 없게 된다.
Path
서버가 라우팅할 때 사용하는 세부 경로
기본값은 /이며, 설정된 경로를 포함하는 하위 경로에도 쿠키를 전송할 수 있다.
다음과 같이 Path 옵션을 지정한 경우
Path: '/docs'/docs 뿐만 아니라, Path를 포함하는 하위 경로인 /docs/web/http 로도 쿠키를 전송할 수 있다.
MaxAge / Expires
쿠키가 삭제되지 않고 유효한 기간
MaxAge는 시간을 초 단위(ms)로 설정하는 옵션이고, Expires는 날짜로 설정하는 옵션이다.
이 옵션의 값들은 클라이언트의 시간 기준이며, 해당 시간(날짜)이 지나면 쿠키는 삭제된다.
다음과 같이 MaxAge/Expires 옵션을 지정한 경우
MaxAge: 1000 * 60 * 30 // 30분
Expires: new Date(Date.now() + (1000 * 60 * 30)) // 30분쿠키는 클라이언트 시간 기준으로 30분 뒤에 삭제된다.
Secure
HTTPS 프로토콜을 사용하는 경우에만 쿠키 전송 허용
https를 통해 쿠키를 주고받아야 쿠키가 암호화되기 때문에 가급적 true로 설정하는 것이 좋다.
단, localhost는 https가 아니어도 쿠키 전송이 가능하다.
HttpOnly
자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부
기본값이 false기 때문에 document.cookie로 쿠키에 접근할 수 있으므로 항상 true로 설정하는 것이 좋다.
SameSite
Cross-Site 요청을 받은 경우, 요청에서 사용한 메서드와 SameSite 옵션의 조합을 기준으로 결정하는 쿠키 전송 여부
옵션값은 다음과 같이 3가지가 있다.
Lax: Cross-Site 요청이라면 GET 메서드에 대해서만 쿠키를 전송할 수 있음Strict: Cross-Site가 아닌 Same-Site인 경우에만 쿠키를 전송할 수 있음(가장 엄격한 옵션)None: 항상 쿠키를 보내줄 수 있으며, Secure 옵션이 필요함(가장 관대한 옵션)
[참고] Cross Origin과 Same Origin
Same Origin은 호스트, 프로토콜, 포트 번호가 모두 일치하는 origin을 의미하고
Cross Origin은 셋 중 하나라도 상이한 origin을 의미한다.
[참고] Cross Site와 Same Site
Same Site는 eTLD+1이 같은 site를 의미하고
Cross Site는 eTLD+1이 다른 site를 의미한다.여기서
TLD란 최상위 도메인을 말하며, www.naver.com에서.com부분이 TLD다.
TLD+1은 최상위 도메인 왼쪽의 하위 레벨 도메인까지 합한 것이며,naver.com부분이 TLD+1이다.
