[네트워크] 쿠키 vs 세션 vs 웹스토리지

HTTP 프로토콜은 상태를 유지하는 영속성이 없다. 이러한 HTTP 프로토콜의 한계를 보안하기 위해 상태를 유지하기 위한 기술로 쿠키와 세션이 있다.

 

쿠키와 세션을 먼저 알아보고, 이후에 나온 웹스토리지와도 비교해보겠습니다.

 

쿠키

• 클라이언트 로컬에 저장되는 키와 값이 들어있는 파일이다.
• 클라이언트 상태 정보를 브라우저에 저장하여 참조한다.
• 구성요소 - 쿠키의 이름 / 값 / 만료시간 / 전송할 도메인 이름 / 전송할 경로 / 보안 연결 여부 등
• 한번에 4KB 로 용량이 제한되고 300개까지저장가능함. (최대용량 : 4KB * 300 = 1.2MB)
    =>  작은정보의 형태로 저장되고 오래되면 자동삭제된다.
• 동작방식
  1. 웹 브라우저가 서버에 요청
  2. 상태를 유지하고 싶은 값을 쿠키로 생성
  3. 서버가 응답할 때 HTTP헤더에 쿠키를 포함해서 전송
  4. 전달받은 쿠키는 웹브라우저에서 관리하고 있다가, 다음 요청 때 쿠키를 HTTP 헤더에 넣어 전송
  5. 서버에서는 쿠키 정보를 읽어 이전 상태 정보를 확인한 후 응답
• 쿠키 사용예) 아이디/비밀번호 저장, 쇼핑몰 장바구니

자바에서 쿠키 사용하기

//Cookie 생성자
Cookie(String name, String value);

// 쿠키생성하기
new Cookie(String name, String value);
ex)Cookie  cookie = new Cookie("id","1234");

// 클라이언트쪽에 클라이언트의 정보 저장
response.addCookie(Cookie co); 

// 접속한 클라이언트에 저장된 쿠키정보(클라이언트정보) 가져오기
Cookie co [] = request.getCookies(); 

Cookie 관련 메소드 정리
     int getMaxAge() //쿠키의 사용할수 있는 기간에 대한 정보
     setMaxAge(int max) // 쿠키가 저장되는 기간 설정
      ex) setMaxAge(0); // 쿠키삭제
          setMaxAge(-1); // 쿠키폴더에 파일이 만들어지지 않지만 브라우져가 종료될까지
                            쿠키의 정보는 저장된 상태이고 브라우져를 닫으면 쿠키정보 사라짐.
                            (setMaxAge를 생략하면 -1을 기본)
                             setMaxAge(60*60*24*365)=> 1년

         setValue(Cookie c) // 쿠키정보 수정하기
          => 쿠키의 정보가 수정되면 setMaxAge도 수정해야만
            정보의 유효기간이 설정됨.
      
     String getName(); //쿠키설정된 이름 가져오기
     String getValue(); // 쿠키에 설정된 값 가져오기 
     
	
     setPath(String path) // 쿠키의 유효한 디렉토리 설정
      ex)setPath("/") // 모든 문서(디렉토리)에서 쿠키사용가능함.

세션

• 일정 시간동안 같은 브라우저로 들어오는 요청을 하나의 상태로 보고, 그 상태를 유지하는 기술이다
• 즉, 웹 브라우저를 통해 서버에 접속한 이후부터 브라우저를 종료할 때까지 유지되는 상태이다.
• 사용자 정보를 서버 측에서 관리한다.
• 서버에서 클라이언트를 구분하기 위해 sessionId를 부여하여, 웹 브라우저가 서버에 접속하여 브라우저를 종료할 때까지 인증상태를 유지한다.
• 접속 시간에 제한을 두어 일정 시간 응답이 없다면, 정보가 유지되지 않게 설정 가능하다.
• 데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.
• 동작방식
  1. 웹 브라우저가 서버에 요청
  2. 서버가 해당 웹브라우저(클라이언트)에 유일한 ID를 부여함
  3. 서버가 응답할 때 HTTP 헤더에 세션ID를 포함해서 전송하고, 쿠키에 세션ID를 jsessionid라는 이름으로 저장
  4. 웹브라우저는 이후 웹브러우저를 닫기까지 다음 요청때 부여된 세션ID가 담겨있는 쿠키를 HTTP 헤더에 넣어 전송
  5. 서버는 세션ID를 확인하고, 해당 세션에 관련된 정보를 확인한 후 응답
• 세션 사용예) 로그인

쿠키 VS 세션 비교

	쿠키	세션
저장위치	클라이언트	서버
보안	클라이언트에 저장되므로 보안에 취약함	쿠키를 이용해 세션ID만 저장하고 이 값으로 구분해서 서버에서 처리하므로 비교적 보안성이 좋다
라이프사이클	만료시간에따라 브라우저를 종료해도 계속해서 남아있을 수 있다.	만료시간을 정할 수 있지만, 브라우저가 종료되면 만료시간에 상관없이 삭제된다
속도	클라이언트에 저장되어서 서버에 요청시 빠르다	실제 저장된 정보가 서버에 있으므로 서버의 처리가 필요해 쿠키보다 느리다.
지원 타입	오직 문자형 데이터 타입만 지원	데이터 타입 뿐만 아니라 객체도 저장 가능

 

웹스토리지 - 로컬스토리지(localStorage), 세션스토리지(sessionStorage)

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소이다.
• 간단한 Key - Value 스토리지 형태이다.
• 쿠키와 달리 자동 전송 위험성이 없다.
• 오리진(Origin -> 도메인, 프로토콜, 포트) 단위로 접근이 제한되는 특성 덕분에 CSRF로부터 안전하다.
• 문자형 데이터 타입만 지원
• 로컬스토리지와 세션 스토리지가 있으며, 같은 스토리지 객체를 상속하기 때문에 메소드가 동일하다

로컬 스토리지(localStorage)

• window.localStorage 객체
• 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 정보가 남아있음(영구성). 단, 동일한 브라우저 사용시에만 해당된다.
• 오리진(= 프로토콜 + 도메인 + 포트)별로 생성되며, 다른 오리진의 로컬 스토리지에는 접근이 불가능하다.
• 서로 다른 브라우저 탭이라도 동일한 오리진이라면 동일한 로컬 스토리지를 사용한다.
• 지속적으로 필요한 데이터 저장(ex. 자동 로그인)

 

세션 스토리지(sessionStorage)

• window.sessionStorage 객체
• 데이터가 오리진뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을경우 제거된다.
• 세션 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성된다.
• 즉, window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제된다.
• 또한 동일한 탭/윈도우라도 다른 오리진(= 프로토콜 + 도메인 + 포트)이라면 또 다른 세션 스토리지가 생성된다.
• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
• 윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 일시적으로 필요한 데이터 저장(ex. 일회성 로그인 정보, 입력폼 저장 등)

 

요약정리

종류	쿠키	세션	세션 스토리지
구조	Cookie-name:Cookie-value	Key : Value	Key : Value
크기	4KB	모바일: 2.5KB 데탑: 5~10KB	모바일: 2.5KB 데탑: 5~10KB
유효시점	지정한 만료기간까지 유효	브라우저 및 OS를 종료하더라도 유효함	새로고침이나 브라우저 탭이 유지될때까지만 유요함
소멸 시점	지정한 만료기간이 지나면 소멸	강제적으로 삭제 및 초기화를 할 때 소멸	탭을 닫거나 브라우저를 닫으며 OS를 종료시 소멸
서버의 전송여부	O(요청 마다 방문정보를 저장)	X	X
장점	- 대부분 브라우저에서 제공 - 유저의 웹 사이트 방문내역을 추적하여 쿠키 제공자의 접속 패턴을 파악하여 유저와 관련성이 높은 마케팅 정보를 제공함	- 서버로 전송되지 않으므로 상대적으로 자원소모가 적음 - 필요한 경우에만 꺼내서 사용하기때문에 자동전송이 되지 않음	- 서버로 전송되지 않으므로 상대적으로 자원소모가 적음 - 필요한 경우에만 꺼내서 사용하기때문에 자동전송이 되지 않음
단점	- 매번 서버로 전송되어 상대적 자원소모가 있음 - 쿠키에 접근 가능하고, 조작하여 CSRF 보안에 취약함	- HTML5를 지원하지 않는 브라우저는 사용 불가	- HTML5를 지원하지 않는 브라우저는 사용 불가
사용처	- 로그인 화면에서 "아이디 자동완성"기능 - 팝업 화면에서 "오늘 하루 보지 않기" 기능 - 미 로그인 상태에서 "장바구니 남기" 기능	- 로그인화면에서 "자동 로그인" 기능	- 임시로 유지되는 입력 폼 정보 - 새로고침 시 데이터 유지 정보 - 일회성 로그인 정보

 

쿠키, 세션, 웹스토리지의 장단점을 파악하고 목적에 따라 선택해서 사용하면 될 것 같다!