✌️두 개의 헤더
쿠키를 사용할 때 두 개의 헤더를 사용합니다.
- Set-Cookie: 서버에서 클라이언트로 쿠키를 전달합니다
- Cookie: 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달합니다
해당 헤더들이 어떻게 사용되는지 예제를 통해 알아보겠습니다.
😗 쿠키를 언제 사용할까요?
실생활의 예제를 통해 조금 더 쉽게 접근해보겠습니다.
네이버에 로그인 한다고 가정해봅시다. 우리는 네이버는 한 번 로그인 하면 그 다음부터 일정 시간 동안은 다시 로그인을 할 필요가 없습니다. 이는 서버가 클라이언트가 로그인을 완료한 것을 기억하고 있기 때문입니다. 이 때 쿠키의 개념이 사용됩니다.
쿠키가 없다면 어떻게 될까요? 모든 요청에 사용자 정보를 포함해야 할 것입니다. HTTP로 돌아가 봅시다.
HTTP는 많이들 알고 있다 싶이 무상태 (stateless) 프로토콜입니다. 무상태 (stateless) 프로토콜은 각각의 요청을 독립적인 트랜섹션으로 취급합니다. 즉, 클라이언트와 서버는 요청과 응답을 마친 뒤 연결이 끊기고, 또 다른 요청이 들어온다면 해당 요청은 이전의 요청과는 독립적인 트랜섹션으로서 서버는 클라이언트와의 연결을 기억하지 못하는 것이죠.
때문에 우리가 로그인을 했더라도 다음 요청에서 서버는 우리가 로그인 한 것을 기억하지 못합니다. 만약 쿠키를 사용하지 않은 채 로그인을 계속 유지하고 싶다면 서버에게 로그인 요청을 계속해서 보내야 합니다.
하지만 모든 요청과 링크에 사용자의 정보를 포함한 로그인 요청을 보낸다면 심각한 부하와 문제를 발생시킬 것입니다.
🥹 쿠키를 사용하게 되면 어떤 변화가 생기나요?
클라이언트가 서버로 로그인 요청을 하면 서버는 Set-Cookie라는 쿠키 헤더를 사용하여 로그인 요청을 넣어 반환합니다.
웹 브라우저는 반환 받은 쿠키의 정보를 내부의 쿠키 저장소에 저장합니다.
이후에 클라이언트가 웹 브라우저로 다시 들어가게 되면 웹 브라우저는 내부의 쿠키 저장소를 다 뒤져 쿠키 정보를 찾아냅니다. 현재 내부의 쿠키 저장소에는 로그인 정보가 있겠네요!
그리고 해당 정보를 Cookie 헤더에 넣어 요청을 보냅니다.
😀 이외에도
쿠키는 보통 사용자의 로그인 세션을 관리하거나 광고 정보를 트래킹하는데 사용됩니다. 쿠키의 정보를 항상 서버에 전송되는데 이 때 네트워크 트래픽을 추가 유발합니다. 따라서 최소한의 정보만 사용하는 것이 좋습니다.
예를 들어, 로그인 한 클라이언트의 세션 id 혹은 인증 토큰에 관련된 정보만 사용하는 것이 좋습니다.
이외에도 웹 스토리지를 사용해서 클라이언트에 쿠키 정보를 보관하고 있다가 필요할 때 마다 서버에 전송하는 로직 또한 존재합니다.
주의 할 점은 보안에 민감한 데이터는 절대 쿠키에 저장하면 안된다는 것입니다.
쿠키의 종류
- 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지
- 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지
쿠키의 도메인
쿠키는 도메인을 지정할 수 있습니다. 도메인을 명시하게 되면 명시한 문서 기준 도메인과 서브 도메인에게 쿠키를 전송합니다
예를 들어 domain = exampla.org를 지정한다면 example.org 뿐만 아니라 dev.example.org도 쿠키를 접근할 수 있습니다.
또한 만약 생략한다면 현재 문서만 도메인을 적용할 수 있습니다.
쿠키의 경로
도메인으로 1차 필터를 하고 경로로 2차 필터를 할 수 있습니다.
path=/ 를 사용해서 해당 경로를 포함한 하위 경로 페이지만 쿠키를 접근하게 허용할 수 있습니다.
예를 들어 path=/home 로 지정했다면 /home/member, /home/list 모두 쿠키로 접근 가능합니다
쿠키의 보안
쿠키와 관련된 보안은 세 가지가 있습니다.
- Secure 기존의 쿠키는 HTTP, HTTPS에 상관없이 전송할 수 있었지만, secure을 사용하게 되면 HTTPS인 경우에만 쿠키를 넣어 전송합니다
- HttpOnly 자바 스크립트에서 접근할 수 없습니다. HTTP 전송에만 사용가능합니다.
- SameSite XSRF 공격을 방지합니다. 즉, 요청하는 도메인과 쿠키에 설정된 도메인이 같은 경우에만 쿠키를 전송합니다.
