[Dreamhack-web] Cookie & Session

서론

- 현대의 웹 서버는 수많은 클라이언트와 HTTP 프로토콜을 사용해 통신하는데, 이 웹 서버는 클라이언트들을 어떻게 구별하고 서로 다른 결과를 반환해주는 걸까?

 

- HTTP 프로토콜로 웹 서버와 통신할 때에는 웹 서버에 명령을 내리기 위해 GET, POST와 같은 메소드와 자원의 위치를 가리키는 URL 등이 포함되어 있다. 

 

- 이외에도 헤더(Header)를 통해서 웹 서버에게 요청을 보내고, 웹 서버는 헤더를 읽고 클라이언트에게 결과 값을 반환하는데, 이 헤더에 클라이언트의 인증 정보 또한 포함될 수 있다.

 

쿠키

- 클라이언트의 IP 주소와 User-Agent는 매번 변경될 수 있는 고유하지 않은 정보일 뿐만 아니라, HTTP 프로토콜의 Connectionless와 Stateless 특징 때문에 웹 서버는 클라이언트를 기억할 수 없다. 

HTTP 프로토콜 특징
● Connectionless : 하나의 요청에 하나의 응답을 한 후 연결을 종료하는 것을 의미한다.  특정 요청에 대한 연결은 이후의 요청과 이어지지 않고, 새 요청이 있을 때 마다 항상 새로운 연결을 맺는다.
● Stateless : 통신이 끝난 후 상태 정보를 저장하지 않는 것을 의미한다. 이전 연결에서 사용한 데이터를 다른 연결에서 요구할 수 없다.

 

- 이러한 특성을 갖는 HTTP에서 상태를 유지하기 위해 쿠키(Cookie)가 탄생했음. 쿠키는 Key와 Value로 이뤄진 일종의 단위로, 서버가 클라이언트에게 쿠키를 발급하면, 클라이언트는 서버에 요청을 보낼 때마다 쿠키를 같이 전송함.

 

용도

정보 기록

- 웹 서버는 각 클라이언트의 팝업 옵션을 기억하기 위해 쿠키에 해당 정보를 기억하고, 쿠키를 통해 팝업 창 표시 여부를 판단한다. 쿠키는 서버와 통신할 때마다 전송되기 때문에 쿠키가 필요 없는 요청을 보낼 때 리소스 낭비가 발생할 수 있어 최근에는 이러한 단점을 보완하기 위해 Modern Storage APIs를 통해 데이터를 저장하는 방식을 권하고 있음.

 

상태 정보

- 많은 웹 사이트에서는 회원 가입과 로그인을 통해 개개인에게 맞춤형 서비스를 제공한다. 웹 서버에서는 수많은 클라이언트의 로그인 상태와 이용자를 구별해야 하는데, 이때 클라이언트를 식별할 수 있는 값을 쿠키에 저장해 사용함.

 

쿠키가 없는 통신

- 쿠키가 없다면 서버는 요청을 보낸 클라이언트가 누군지 알 수 없기 때문에 현재 어떤 클라이언트와 통신하는지 알 수 없다.

쿠키가 있는 통신

- 클라이언트가 서버에 요청을 보낼 때마다 쿠키를 포함한다면, 서버는 해당 쿠키를 통해 클라이언트를 식별할 수 있다.

 

쿠키 변조

- 쿠키는 클라이언트의 브라우저에 저장되고 요청에 포함되는 정보이므로, 악의적인 클라이언트는 쿠키 정보를 변조해 서버에 요청을 보낼 수 있음. 만약 서버가 별다른 검증 없이 쿠키를 통해 이용자의 인증 정보를 식별한다면 타 이용자를 사칭해 정보를 탈취할 수 있다.

 

세션

- 웹 통신에서는 클라이언트가 쿠키를 변조해 서버에 요청을 보낼 수 있으므로, 쿠키에 인증 상태를 저장하지만 클라이언트가 인증 정보를 변조할 수 없게 하기 위해 세션(Session)을 사용한다. 세션은 인증 정보를 서버에 저장하고, 해당 데이터에 접근할 수 있는 키(유추할 수 없는 랜덤한 문자열)을 만들어 클라이언트에 전달하는 방식으로 작동한다. -> 이 키를 일반적으로  Session ID라고 함.

 

쿠키 적용법

- 쿠키는 클라이언트에 저장되기 때문에 클라이언트는 저장된 쿠키를 조회, 수정, 추가할 수 있음. 

 

쿠키 설정

서버

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;
...

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

 

클라이언트

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

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

 

쿠키 열람

크롬 Application 활용

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

Chrome - Application을 활용해서 찾아낸 쿠키 목록

크롬 Console 활용

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

Chrome - Console을 활용해서 찾아낸 쿠키