All Articles

Cookie..Session..Web Storage..

cookie session

  • 쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
  • 쿠키에는 이름, 값, 만료일, 경로 정보가 들어있다.
  • 쿠키는 일정 시간동안 데이터를 저장할 수 있다. (로그인 상태 유지에 활용)
  • 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

<쿠키 프로세스>

  1. 브라우저에서 웹페이지 접속
  2. 클라이언트가 요청한 웹페이지를 받으면서 쿠키를 클라이언트 로컬 하드디스크에 저장
  3. 클라이언트가 재 요청시 웹페이지 요청과 함께 쿠키값도 전송

<쿠키 사용 사례>

  • 자동 로그인, “오늘 더 이상 보지 않기” 체크 팝업창, 쇼핑몰의 장바구니

<쿠키의 제한>

  • 클라이언트에 300개까지 쿠키 저장 가능
  • 하나의 도메인당 20개의 값만 가질 수 있음
  • 하나의 쿠키값은 4KB까지 저장
  • Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키 생성
  • 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다.

Session

  • 일정 시간동안 같은 브라우저로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지하는 기술
  • 웹 브라우저를 통해 웹 서버에 접속한 이후로 브라우저를 종료할 때까지 유지되는 상태
  • 클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 Session ID 이다.

<세션 프로세스>

  1. 클라이언트가 서버에 접속시 세션 ID를 발급
  2. 서버에서는 클라이언트로 발급해준 세션 ID를 쿠키를 사용해 저장 (JSESSIONID)
  3. 클라이언트는 다시 접속할 때, 이 쿠키(JSESSIONID)를 사용해서 세션 ID를 서버에 전달
  4. 세션을 구별하기 위해 ID가 필요하고 그 ID만 쿠키를 이용해서 저장해놓는다. 쿠키는 자동으로 서버에 전송되니까 서버에서 세션ID에 따른 처리를 할 수 있음.
  5. 세션 사용 사례: 로그인 정보(Data) 유지

쿠키와 세션의 차이

  • 저장 위치: 쿠키는 클라이언트에 파일로 저장, 세션은 서버에 저장
  • 보안: 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스나이핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionID 만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋다.
  • 라이프 사이클: 쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다. 반면에 세션도 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제된다.
  • 속도: 쿠키는 클라이언트 하드에 있기 때문에 서버에 요청시 속도가 빠르고, 세션은 서버에 있기 때문에 처리가 요구되어 비교적 느린 속도를 낸다.

세션을 주로 사용하면 좋은데 왜 쿠키를 사용할까?

세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어질 수가 있고, 속도가 느려질 수 있기 때문이다.

출처: https://jeong-pro.tistory.com/80

  • 웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.
  • 웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다.
  • 웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용된다.

LocalStorage

  • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data
  • Storage limit is the maximum amongst the three

SessionStorage

  • The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
  • Data is never transferred to the server.
  • Storage limit is larger than a cookie (at least 5MB).
  • Stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side).
  • Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.
  • Size must be less than 4KB.
  • Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie

<출처>

Published 12 Feb 2020

Write posts i learned or thought. Simple code is better.Groot on Twitter