🍪 쿠키

탄생 배경

Connectionless, Stateless 특성을 갖는 HTTP에서 상태를 유지하기 위해 쿠키(Cookie)가 탄생했다.

쿠키는 Key와 Value로 이뤄진 일종의 단위로, 서버가 클라이언트에게 쿠키를 발급하면, 클라이언트는 서버 요청을 보낼 때마다 쿠키를 같이 전송한다. 서버는 쿠키를 확인함으로써 클라이언트를 구분할 수 있다.

일반적으로 쿠키는 클라이언트의 정보 기록과 상태 정보를 표현하는 용도로 사용한다.

---

정보 기록

웹 서비스 사용 시 팝업 창에 뜨는 "다시 보지 않기", "7일 간 표시하지 않기" 버튼이 존재한다. 웹 서버는 해당 클라이언트의 팝업 옵션을 기록하기 위해 쿠키에 해당 정보를 기록하고, 쿠키를 통해 팝업 창 표시 여부를 판단한다.
쿠키는 서버와 통신할 때마다 전송되기 때문에 쿠키가 필요 없는 요청을 보낼 때 리소스 낭비가 발생할 수 있다.
때문에 최근에는 Modern Storage APIs를 통해 데이터를 저장하는 방식을 권장한다.

상태 정보

웹 서버에서는 수많은 클라이언트의 로그인 상태와 이용자를 구별해야 한다. 이때 클라이언트를 식별할 수 있는 값을 쿠키에 저장해서 사용한다.

---

쿠키 변조

쿠키는 클라이언트의 브라우저에 저장되고 요청에 포함되는 정보이다.
따라서 악의적인 클라이언트는 쿠키 정보를 변조해서 서버에 요청을 보내서 정보를 탈취할 수 있다.

---

⚔️ 세션

쿠키에 인증 상태를 저장하지만 클라이언트가 인증 정보를 변조할 수 없게 하기 위해 세션(Session)을 사용한다.

세션은 인증 정보를 서버에 저장하고 해당 데이터에 접근할 수 있는 키(유추할 수 없는 랜덤한 문자열) 를 만들어 클라이언트에 접근하는 방식으로 작동한다. 해당 키를 Session ID라고 한다.

브라우저는 Session ID를 쿠키에 저장하고 HTTP 요청을 보낼 때 사용한다. 서버는 요청에 포함된 키에 해당하는 데이터를 가져와 인증 상태를 확인한다.

쿠키는 데이터 자체를 이용자가 저장하며, 세션은 서버가 저장한다는 차이점이 존재한다.

---

쿠키 적용법

쿠키는 클라이언트에 저장되기 때문에 클라이언트는 저장된 쿠키를 조회, 수정, 추가할 수 있다.
쿠키를 설정할 때에는 만료 시간을 지정할 수 있고, 만료 시간 이후에는 클라이언트에서 쿠키가 삭제된다. 쿠키의 만료는 클라이언트(브라우저)에서 관리된다.

쿠키는 서버와 클라이언트 둘 다 설정할 수 있다.

1. 서버

HTTP 응답 중 헤더에 쿠키 설정 헤더(Set-Cookie)를 추가하면 클라이언트의 브라우저가 쿠키를 설정한다.

HTTP/1.1 200 OK
Server: Apache/2.4.29 (Ubuntu)
Set-Cookie: name=test;
Set-Cookie: age=30; Expires=Fri, 30 Sep 2022 14:54:50 GMT;
...

2. 클라이언트

자바스크립트를 이용해 쿠키를 설정한다.

document.cookie = "name=test;"
document.cookie = "age=30; Expires=Fri, 30 Sep 2022 14:54:50 GMT;"

크롬 Console을 활용하는 법

• 크롬 페이지에서 우클릭했을 때 표시되는 검사 버튼을 누르고 Console탭을 누른 다음
  document.cookie를 입력하면 쿠키 정보를 확인할 수 있다.
  

크롬 Application을 활용하는 법

• 크롬 페이지에서 우클릭했을 때 표시되는 검사 버튼을 누른 후 Application 탭을 누른다. 좌측의 나열된 목록에서 Cookies를 펼치면 Origin 목록을 확인할 수 있다.
  Origin을 누르면 설정된 쿠키 정보를 확인/수정할 수 있다.
  

---

연습

1. 드림핵 로그인 페이지에서 우클릭 후 검사를 클릭하고 Network 탭을 누른다. Preserve log를 체크하고 로그인을 하면 로그인 성공 시 응답을 볼 수 있다.
   응답을 살펴보면, 서버에서 set-cookie헤더를 통해 설정된 쿠키를 확인할 수 있다.
   
2. 크롬 검사에서 Application을 누르고, Cookies 목록 안의 https://dreamhack.io를 누르면 서버의 set-cookie헤더를 통해 설정된 쿠키를 확인할 수 있다.
   
3. sessionid 헤더의 값을 메모장에 복사한 뒤 sessionid헤더의 값을 delete한다. 세션 값을 삭제하고 새로고침하면 로그인이 풀려있는 걸 확인할 수 있다.
   
4. 쿠키의 빈칸을 더블 클릭해서 sessionid 헤더를 추가하고, 이전에 복사한 값을 입력하면 브라우저의 쿠키에 세션 값이 설정된다. 세션 값을 설정하고 드림핵 페이지를 새로고침하면 로그인이 된다.