1. Cookie, Session

쿠키

HTTP는 무상태성을 지향한다. 즉, 클라이언트의 상태를 서버가 알지 못하며, 모든 요청을 독립적인 것으로 본다. 쿠키는 HTTP의 무상태성을 보완하기 위한 데이터 조각이다.

쿠키는 서버, 클라이언트에서 모두 발행이 가능한데, 이를 브라우저에 저장해두었다가 모든 HTTP 요청 해더에 추가되어 서버측으로 전달이 된다. 서버는 쿠키값들 통해 클라이언트 상태(세션, 개인화, 유저 트래킹) 를 구분한다.

쿠키 생성

서버측, HTTP 요청에 대해 응답할 때 Set-Cookie 해더에 담아 전송한다. 클라이언트는 이를 브라우저에 저장하고 모든 요청 시 요청 해더에 포함하여 전달한다.

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

쿠키 라이프타임

쿠키는 세션 쿠키, 만료 쿠기로 구분된다. 세션 쿠키는 현재 세션이 끝날 때 삭제되며, 만료 쿠키는 Expires 속성에 명시되어 있는 날짜 혹은 Max-age 속성에 명시된 기간 이후 삭제된다.

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

Secure, HttpOnly

Secure 쿠키는 암호화된 HTTPS 요청일 경우 셋이 가능하지만, 이 또한 민감한 정보를 담아서는 안된다.

httpOnly는 자바스크립트에서 document.cookie 로서의 접근을 막는다. 이는 쿠키를 훔쳐가는 Cross-site 를 방지하기 위함이다.

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

쿠키 적용 범위

쿠키는 Domain, Path 디렉리브를 통해 스코프를 정의한다. 쿠키의 발급 호스트를 구분지어 해당되는 쿠키만 요청 해더에 담아 전달한다.

SameSite 쿠키는 크로스 사이트로 전송하는 요청의 경우 쿠키 전송을 제한하는 디렉티브이다. 쿠키를 범위를 동일 사이트 컨텍스트로 제한할 것인지에 대한 여부를 선언한다.

www.web.dev에서 static.web.dev 로 이미지 요청 //same-site
your-project.github.io에서 my-project.github.io 로 이미지 요청 //site간 요청
  • None, 크로스 사이트이더라도 항상 전송한다. None을 사용할 경우 Secure 디렉티브가 포함되어 있어야 한다.

  • Strict, 크로스 사이트 요청 시 항상 전송하지 않는다.

  • Lax, 크로스 사이트 요청 시 쿠키가 전달되는 몇 가지 예외 상황을 둔다.

    • 동일 사이트의 경우, HTTP GET처럼 서버의 수정을 가하지 않는 안전한 요청에 한해

    • 크롬의 기본값은 Lax

세션

쿠키와 마찬가지로 HTTP 무상태성을 보완하기 위한 정보이다. 브라우저에 저장하는 쿠키와는 달리 서버측에 저장된다. 서버에서 클라이언트에게 세션 아이디를 부여하면 이를 브라우저는 쿠키로 저장하고 모든 요청의 요청 해더에 포함하여 전달한다.

즉, 세션 아이디를 통해 서버측에서 클라이언트를 식별하여 개인화한다. DB와 같은 물리적인 공간에 저장되기 때문에 서버의 부하를 초래할 수 있다.

HTTP Cookie
SameSite

Last updated