Cookie
🍪 Cookie
쿠키는 🍪?
서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다.
서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.
쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.
데이터를 저장한 이후 특정 조건들이 만족되면 데이터를 다시 가져올 수 있다.
이런 조건들은 아래 코드처럼 http 헤더를 사용해 쿠키 옵션으로 표현할 수 있다.
'Set-Cookie':[
'cookie=yummy',
'Secure=Secure; Secure',
'HttpOnly=HttpOnly; HttpOnly',
'Path=Path; Path=/cookie',
'Doamin=Domain; Domain=codestates.com'
]🍪 쿠키 옵션 종류
Domain
도메인이란 흔히 사용하는 www.google.com 과 같은 서버에 접속할 수 있는 이름.
쿠키 옵션에 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않는다.
여기서 서브 도메인이란 www 같은 도메인 앞에 추가로 작성되는 부분을 말한다.
요청해야 할 URL 이 http://www.localhost.com:3000/users/login 인 경우 Domain은 localhost.com 이다.
쿠키 옵션에 도메인 정보가 존재한다면, 쿠키의 도메인 옵션과 서버의 도메인이 일치해야 쿠키를 전송할 수 있다.
Path
Path는 세부 경로로써 서버가 라우팅할 때 사용하는 경로를 의미.
요청해야 할 URL이 http://www.localhost.com:3000/users/login 인 경우 Path,
즉 세부 경로는 /users/login 이다. (기본 / )
Path 옵션의 특징은 설정된 경로를 포함하는 하위 경로로 요청을 해도 쿠키를 전송할 수 있다.
MaxAge or Expires
쿠키의 유효한 기간을 정하는 옵션.
MaxAge 는 쿠키가 유효한 시간을 초 단위로 설정하는 옵션.
Expires 는 MaxAge 와 비슷하지만 언제까지 쿠키가 유효한지 심판의 날을 지정.
이때 옵션의 값은 클라이언트의 시간을 기준.
쿠키는 위 옵션의 여부에 따라 세션 쿠키(Session Cookie)와 영속성 쿠키(Persistent Cookie)로 나뉘어짐.
세션 쿠키: MaxAge 또는 Expires 옵션이 없는 쿠키, 브라우저가 실행 중일때 사용할 수 있는 임시 쿠키.
브라우저 종료 ➡️ 쿠키 삭제 🍪❎
영속성 쿠키: 브라우저의 종료와 상관없이 MaxAge 또는 Expires 에 지정된 유효시간만큼 사용 가능한 쿠키.
Secure
사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션.
Secure 옵션이 true 로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키를 전송가능.
단, 도메인이 localhost 인 경우에는 HTTPS가 아니어도 쿠키 전송이 가능.
HttpOnly
자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정.
true 로 설정된 경우 자바스크립트로 쿠키에 접근이 불가.
옵션을 명시하지 않는 경우에는 기본적으로 false.
앵간하면 true로 설정하자.
SameSite
Cross-Site 요청을 받은경우, 요청에서 사용한 메서드 (GET, POST, PUT, PATCH...)와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정. 이때 Cross-Origin과 Cross-Site를 혼동하지 않도록 주의해야함.
Cross-Origin: 서버의 도메인, 프로토콜, 포트 중 하나라도 다른 경우 Cross-Origin 으로 구분.
- http://codestates.com 🆚 https://codestates.com
➡️ 프로토콜이 다르므로 Cross-Origin. - https://codestates.com:443 🆚 https://codestates.com
➡️ https의 기본 포트는 443, 따라서 도메인, 프로토콜, 포트가 같은 Same-Origin.
Cross-Site: eTLD+1이 다른 경우 Cross-Site로 구분.
여기서 eTLD+1 이란, .com, .org 같이 도메인의 가장 마지막 부분을 TLD(Top Level Domain, 최상위 도메인)라고 하는데, 최상위 도메인의 바로 왼쪽의 하위 레벨 도메인을 합한 것을 eTLD+1 라고함.
자주 볼 수 있는 .io 의 경우 바로 왼쪽의 주소를 하나 더 합한 것을 TLD라고 판단함.
- http://codestates.com 🆚 https://codestates.com
➡️ 두 주소 모두 TLD는 .com, eTLD+1은 codestates.com 으로 같으므로 Same-Site. - https://code.github.io 🆚 https://states.github.io
➡️ 두 주소 모두 TLD는 github.io 로 같지만, eTLD+1은 code.github.io, states.github.io 로 달라 Cross-Site.
SameSite 옵션에서 사용할 수 있는 속성은 다음과 같다.
- Lax: Cross-Site 요청이라면 GET 메서드에 대해서만 쿠키를 전송할 수 있다.
- Strict: 가장 엄격한 옵션으로, Cross-Site가 아닌 Same-Site인 경우에만 쿠키를 전송할 수 있다.
- None: 가장 관대한 옵션으로, 항상 쿠키를 보내줄 수 있다. 다만 쿠키 옵션중 Secure옵션이 필요하다.
서버에서 이러한 옵션들을 지정한 다음 서버에서 클라이언트로 쿠키를 처음 전송하게 된다면 헤더에 Set-Cookie 라는 프로퍼티로 쿠키를 담아 전송한다.
이후 클라이언트에서 서버에게 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie 라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송한다.
🍪 쿠키를 이용한 상태 유지
이러한 쿠키의 특성을 이용하여 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 서버에 요청과 함께 전송하여 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있다.
하지만 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기에 쿠키에 민감한 정보를 담는 것은 위험하다.
