Stateless를 Stateful하게 만들어주는 Cookie!

 

쿠키는 서버에서 클라이언트에 데이터를 저장하는 방법 중의 하나입니다.

그래서 서버가 원한다면 서버는 클라이언트에서 쿠키를 이용해서 데이터를 가져올 수 있습니다.

그래서 쿠키를 이용하는 것은 다음과 같습니다.

 

• 서버 > 클라이언트로 쿠키전송
• 클라이언트 > 서버로 쿠키전송

 

서버는 클라이언트에 데이터를 저장할 수 있고 특정 조건이 만족할 때 데이터를 가져올 수 있습니다. 

쿠키옵션은 다음과 같습니다.

 

 

1. Domain

쿠키옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다.

따라서 만약 http://www.localhost.com:3000/users/login일 경우 여기서 도메인은 "localhost.com"이 됩니다.

그래서 쿠키를 전송하려면  클라이언트에서의 쿠키의 도메인 옵션과 서버에서의 쿠키의 도메인이 일치해야 쿠키를 전송할 수 있습니다.

 

2. Path

세부경로는 서버가 라우팅할 때 사용하는 경로이고 만약 http://www.localhost.com:3000/users/login 일경우에는 여기에서 path, 세부경로는 /users/login이 된다.

 

특별히 명시하지 않으면 default는 "/"으로 설정된다. 

 

Path옵션의 특징은 설정된  path를 전부 만족하면 요청하는 path가 추가로 더 있더라도 쿠키를 서버에 전송할 수 있다.

ex))

Path : /users

요청 Path : /users/login 

인경우라면 Path를 만족하기 때문에 쿠키전송이 가능하다.

그러나 다음과 같이 아예 path 옵션이 다르면 서버로 쿠키를 전송할 수 없다.

Path : /users
요청 Path : /user/login
요청 Path: /user/login일 경우 path 옵션을 만족하지 못하기 때문에 서버로 쿠키전송이 불가능 

 

 

 

3. MaxAge or Expires

MaxAge=<number> : 앞으로 몇 초 동안 쿠키가 유효한지 설정하는 옵션
쿠키가 만료될 때 까지의 시간 (초 단위). 0 또는 음수가 지정되면 해당 쿠키는 즉시 만료되며, 오래된 브라우저(ie6, ie7 그리고 ie8)은 이 헤더를 지원하지 않습니다. 다른 브라우저들은 둘 다(Expires 와 Max-Age) 지정되었을 때 Max-Age 값을 더 우선시합니다.

Expires=<date> : MaxAge와 비슷하지만 언제까지 유효한지 Date를 지정함( 클라이언트 시간기준) -

HTTP 타임스템프로 기록된 쿠키의 최대 생존 시간(수명). 세부 형태를 확인하려면 Date를 참조하세요. 지정되지 않았다면, 세션 쿠키로서 취급되며, 클라이언트가 종료될 때 파기 됩니다. 그러나 많은 웹 브라우져에서 세션이라고 불리는 기능(그러니까 모든 탭을 기억했다가 브라우져를 다시 켜면 복구된다던지 하는 기능)을 구현합니다. 쿠키들 또한 함께 복원되므로, 정확히 말해서 브라우져를 닫은 적이 없는 게 되는 것이죠.

만료 시간이 지정되면, 시간 및 날자로 이뤄진 값은 서버가 아니라 클라이언트에 상대적인 값으로 취급됩니다.

이후 지정된 시간, 날짜를 초과하면 쿠키는 자동으로 파괴되며 두 옵션이 지정되지 않는 경우에는 브라우저 탭을 닫아야 쿠키가 제거될 수 있다.

 

 

4. Secure

 

쿠키를 전송할 때 사용하는 프로토콜에 따른 쿠키 전송여부 결정
true : HTTPS 를 이용하여 통신하는 경우 쿠키전송 가능

 

 

5. HttpOnly 
자바스크립트에서 브라우저의 쿠키에 접근 여부를 결정함

옵션이 true일 경우 : 자바스크립트에서 쿠키에 접근이 불가함
옵션이 false일 경우 : 자바스크립트에서 쿠키에 접근이 가능하고 XSS 공격에 취약함 

 

6. SameSite 

Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합으로 서버의 쿠키 전송여부를 결정

LAX : Cross-Origin 요청이면 "GET" 메소드에서만 쿠키 전송이 가능

Strict : Cross-Origin이 아닌 same-site인 경우에만 쿠키전송 가능
None : 항상 쿠키를 전송할 수 있음 그러나 쿠키옵션중 Secure 옵션이 필요함

(이 때 same-site는 요청을 보낸 Origin과 서버의 도메인이 같은 경우를 말함)
이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하면 헤더에 "Set-Cookie"라는 프로퍼티에 쿠키를 담아 쿠리를 전송하게됨

 

예시

Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure

// Multiple attributes are also possible, for example:
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

 

 

쿠키를 이용한 상태 유지

 

이러한 쿠키의 특성을 이용하여 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 요청과 같이 전송하여 Stateless(무상태)한 인터넷 연결을 Stateful하게 유지할 수 있음

 

하지만 기본적으로는 쿠키는 오랜 시간 동안 유지될 수 있고, 자바스크립트를 이용해서 쿠키에 접근할 수 있기때문에 민감정보는 담지 않는 것이 좋다.

 

 

 

출처  : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

Set-Cookie - HTTP | MDN