쿠키와 세션 그리고 Web Storage API

들어가기 전에...

해당 포스팅에서 클라이언트와 (크롬과 같은)웹 브라우저는 같은 의미로 사용한다.

쿠키

웹 브라우저는 작은 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송하는 데, 그 작은 데이터 조각들을 쿠키라고 한다. 쿠키는 서로 다른 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다.

쿠키의 동작 방식

1. 클라이언트가 웹 페이지를 요청하면 웹 서버는 쿠키를 생성하여 응답 헤더에 이를 포함하여 클라이언트측에 전송
2. 클라이언트는 전송받은 쿠키를 KEY-VALUE의 데이터 형식으로 저장
3. 클라이언트는 쿠키를 저장했던 서버와 동일한 서버로 다시 요청을 보낼 때, 저장되어 있는 쿠키를 함께 전송

쿠키의 목적

상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억
서버는 클라이언트가 같은 서버의 다른 페이지로 이동할 때 사용자의 데이터를 기억하고 있어야 한다. 그렇지 않으면 페이지를 이동할 때 마다 새롭게 로그인을 해야하고, 구매 버튼을 누른 뒤에 결제 페이지에어 어떤 상품을 구매할 건지에 대해 알 수가 없다.

 

앞서 이야기 했듯 쿠키는 서버가 사용자 인증, 추적, 상태 유지 등에 사용된다. 로그인 정보를 쿠키에 저장하기도 했지만, MDN에서는 쿠키보다 보안이 강화된 Web Storage API와 토큰을 활용하여 로그인 정보를 저장하는 것을 더 권장하고 있다.

MDN
참고: 기밀 혹은 민감한 정보는 전체 메커니즘이 본질적으로 위험하기 때문에 HTTP 쿠키 내에 저장되거나 전송되어서는 안됩니다.

• 세션 관리
  로그인, 아이디 자동완성, 공지 하루 안 보기, 팝업 체크, 장바구니 등의 정보 관리
• 개인화
  사용자 선호, 테마 등의 설정 관리
• 트래킹
  사용자 행동을 기록 및 분석하는 용도

쿠키의 수명

• Session cookie
  • 현재 세션이 종료되면 삭제일부 브라우저는 재시작할 때 세션을 복원해 세션 쿠키가 무기한 존재할 수 있도록 한다.
• Persistent cookie
  • Expires 속성에 지정된 날짜 혹은 Max-Age 속성에 지정된 기간이 지나면 삭제
  • 브라우저 종료와 함께 세션이 삭제

세션

쿠키와 비슷하지만 데이터의 조각들이 클라이언트가 아닌 웹 서버에 저장된다. 일정 시간동안 클라이언트가 웹 서버에 접속한 후의 상태를 서버가 기억하고 유지하는 기술이다. 데이터가 클라이언트 측이 아닌 서버 측에 저장되기 때문에 쿠키보다 보안에 있어서 더 유리하다. 또한 데이터가 서버에서 관리되기 때문에 클라이언트는 필요한 상태 데이터를 서버에 전송하지 않아도 된다.

세션의 동작 방식

세션 방식에서는 상태 정보 데이터를 클라이언트에 저장하지 않는 것이지만, 고유한 Session ID를 쿠키로 저장하여 서버에 요청과 함께 전송한다.

1. 클라이언트가 페이지를 요청하면 서버는 클라이언트의 쿠키를 확인하여, Session ID를 확인한다.
2. 만약 Session ID가 존재한다면 해당 Session ID에 연결된 세션 데이터를 서버에서 가져와 사용자의 상태 정보를 확인하여 필요한 데이터를 응답으로 보내는다.
3. 만약 Session ID가 존재하지 않는다면 서버는Session ID를 생성해 클라이언트에 응답으로 보내주고 클라이언트는 이를 쿠키로 저장한다.

세션의 목적

세션과 쿠키는 모두 클라이언트와 서버 간의 상태를 유지하고 정보를 저장하는 것으로 동일하지만 그 방식에 있어서 차이가 있을 뿐이다.

쿠키의 단점인 보안 취약점을 개선할 수 있는 장점이 있지만, 웹서버의 자원을 소모하고, 쿠키보다 느리다는 단점이 있다. 이러한 특징에 따라 쿠키와 세션의 사용을 결정한다.

세션의 수명

브라우저 종료시 삭제하거나 기간을 지정하여 기간이 지나면 서버에서 삭제한다.

Web Storage API

특징

• Web Storage는 서버에 데이터를 전송하지 않기 때문에 성능이 향상된다. 반면 쿠키는 모든 HTTP 요청에 포함되어야 하기 때문에 데이터 양이 큰 경우 성능에 영향을 줄 수 있다.
• Web Storage는 클라이언트 측에서 관리되며, 보안측면에서 쿠키보다 더 안전하다. Web Storage는 JavaScript로만 접근할 수 있기 때문에 악의적인 코드가 쉽게 접근할 수 없기 때문이다.
• Web Storage의 데이터는 세션이나 만료 시간과 상관없이 지속적으로 유지될 수 있다.
• Web Storage API는 쿠키보다 더 직관적이고 간편하며, 데이터를 읽고 쓰는 데 필요한 API가 간단하게 구성되어 있다.

종류

sessionStorage

• 각각의 출처(웹 사이트)에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공한다.
• 데이터를 절대 서버로 전송하지 않는다.
• 저장공간이 쿠키보다 크다.

localStorage

• 유효기간 없이 데이터를 저장한다.
• JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.

 

참고자료

MDN HTTP 쿠키

MDN Web Storage API

썸네일 출처: www.slon.pics, Freepik