[11] HTTP 쿠키

HTTP 는 Stateless 프로토콜이다. 그래서 클라이언트와 서버가 요청을 주고 받고 나면 더 이상 연결을 유지하지 않는다. 그리고 이전 요청에 대해 서버는 기억하지 않는다. 그래서 Login 서비스와 같이 이전상태를 기억해야하는 서비스는 HTTP 프로토콜을 이용할때 한계가 있다.

그래서 등장한 것이 쿠키다.

 

- 쿠키 동작 방식

1) 클라이언트가 서버에게 요청을 보냄

POST /login HTTP/1.1
id=abc&password=1234

 

2) 서버는 HTTP 메세지 Set-Cookie 에 다음과 같은 정보를 포함 시켜서 클라이언트에게 보냄

HTTP/1.1 200 OK
Set-Cookie: sessionId=abcde1234; expires=Sat,26-Dec-2020 00:00:00 GMT; path=/; domain=google.com; Secure

sessionId = 세션의 고유한 아이디

expires = 세션 만료일 ( 날짜까지 유지된다. 브라우저 종료되도 상관없음. 생략하면 브라우저 종료시까지만 유지)

domain = 만약 생략하면 현재 페이지 기준 도메인만 접근가능하다. 명시할 경우 현재 페이지 도메인 + 서브도메인까지 쿠키 접근 가능함. 예를 들어 example.org 로 domain을 설정하면 dev.example.org 도 접근이 가능함.

path= 경로 ( 이 경로를 포함한 하위 경로만 쿠키 접근 가능. 보통 루트(/) 로 지정함. )

Secure = https 인 경우에만 전송. Secure를 생략하면 http, https 상관없이 전송함.

 

3) 클라이언트는 쿠키정보를 쿠키저장소에 저장한다.

4) 클라이언트는 서버에게 다시 요청보낸다.

GET /welcome HTTP/1.1
Cookie: sessionId=abcde1234...

5) 서버는 쿠키정보를 바탕으로 사용자의 정보를 파악할 수 있게 된다.

 

+ 쿠키 정보는 항상 서버에 전송되므로 최소한의 정보인 ( 세션id, 인증토큰)만 사용을 권장한다. 서버에 전송하지 않고 클라이언트가 관리하려면 LocalStorage, sessionStorage 를 이용한다.

 

 

그외 Set-Cookie의 옵션으로  HttpOnly , SamSite의 옵션이 있다.

HttpOnly는 자바스크립트에서 접근 불가하게 하는것이고 SameSite는 요청 도메인과 쿠키에 설정된 도메인이 같은 경우에만 쿠키를 전송하도록 하는 것이다.

 

더 자세한 내용은 아래를 참조하자!

ko.javascript.info/cookie

쿠키와 document.cookie