쿠키 & 세션 & Web Storage

📝 데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장할 때 사용하는 것

---

쿠키

📝 클라이언트 로컬(메모리 혹은 보조기억장치)에 저장되는 키-값 형태의 데이터 파일

특징

• 로컬 스토리지, 세션 스토리지가 나오기 이전에 브라우저의 저장소 역할을 했음
  ⇒ 대부분의 브라우저가 지원
• 만료 기한이 있음 (기한이 정해지면 브라우저가 종료되어도 유지됨)
• 같은 도메인 상에서 쿠키 값이 공유됨
• 4KB의 용량 제한
• 서버에 요청할 때마다 매번 함께 전송됨
• document.cookie를 통해 쿠키 정보 확인 가능 (HttpOnly로 자바스크립트에서 쓸 수 없게 막아둔 쿠키는 나오지 않음)

사용 목적

• 세션 관리(Session Management) : 로그인, 사용자 닉네임, 접속 시간, 장바구니 등 서버가 알아야 할 정보들을 저장
• 개인화(Personalization) : 사용자마다 다르게 적절한 페이지를 보여줌
• 트래킹(Tracking) : 사용자 행동과 패턴을 분석하고 기록함

쿠키와 세션을 사용하는 이유

📝 HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야 함 ⇒ HTTP 프로토콜의 특성 때문

• HTTP 프로토콜의 특성
  • connectionless : 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특성
    (HTTP 1.1 버전에서 연결을 유지하는 기능이 Default로 추가되었음 ⇒ keep-alive 값)
  • stateless : 연결을 끊으면 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성

위와 같은 특성들로 인해 서버가 클라이언트를 식별할 수 없으므로, 서버는 클라이언트가 다시 돌아 왔을 때 사용자에 대한 유일한 값을 쿠키에 할당해 사용자를 식별하는 용도로 사용됨

쿠키의 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
   Response Header 의 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
3. HTTP 헤더에 쿠키를 포함시켜 응답, 이때 여러 옵션 지정 가능
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 계속 보관
5. 다시 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

// 서버의 HTTP 응답 헤더

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: name=khan
Set-Cookie: job=developer

// 클라이언트의 요청

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: name=khan; job=developer

쿠키의 종류

크게 두 개로 나눌 수 있다(Session Cookie, Persistent Cookie)

• Session Cookie : 사용자가 사이트 탐색 시에 관련한 설정들과 선호사항을 저장하는 임시 쿠키, 브라우저 종료시 삭제
• Persistent Cookie : Expires, Max-Age 파라미터 설정해 장기간 유지되는 쿠키, 디스크에 파일로 저장되어 브라우저를 닫거나 컴퓨터를 재시작해도 남아 있음
• Secure Cookie : HTTPS에서만 사용, 쿠키 정보가 암호화되어 전송
• Third-Party Cookie : 사용자가 방문한 도메인이 아닌 다른 도메인의 쿠키, 보통 광고 배너 등을 관리할 때 유입 경로를 추적하기 위해 사용

쿠키의 옵션

• Expires : 쿠키 만료 날짜를 알려줄 수 있음
• Max-Age : 쿠키가 삭제될 시간을 초 단위로 설정
  • (이 옵션이 있을 경우 Expires은 무시됨)
  • IE 지원 X, IE에서는 세션 쿠키가 됨
• HttpOnly : 자바스크립트에서 쿠키에 접근할 수 없도록 함 (XSS를 막기위해 활성화하는 것이 좋음)
• Domain, Path : 쿠키의 스코프 정의
• Domain : 도메인을 명시하여 해당 도메인에서만 쿠키가 전송되게 할 수 있음
• Path : 패스를 명시하여 해당 패스의 요청에서만 쿠키가 전송되게 할 수 있음
• Secure : HTTPS로 통신하는 경우에만 쿠키가 전송됨
• Samesite : 사이트 외부에서 요청을 보낼 때 브라우저가 쿠키를 보내는 것을 막아줌

Set-Cookie: name=khan; Expires=Mon, 10 Oct 2022 20:00:00 GMT; Secure; HttpOnly

쿠키의 단점

• 보안 취약 : 요청 시 쿠키 값을 그대로 보냄, Persistent 쿠키의 경우 사용자의 하드디스크에 저장되므로 공공장소에서 쿠키를 사용할 경우 다른 사람이 쉽게 얻어낼 수 있음, XSS 공격이나 스니핑 공격 등에 취약
• 작은 허용 용량 : 사이트 당 20개, 모두 합쳐 300개가 최대
• 저장된 데이터가 모든 요청에 포함 ⇒ 굳이 필요하지 않은 데이터까지 모두 전송되어 트래픽 증가
• 웹 브라우저마다 지원 형태가 다름
• 웹 브라우저를 변경할 경우 다른 웹브라우저에서 저장한 쿠키값을 사용할 수 없음
• 사용자가 보안상의 문제로 거부할 경우 사용 불가능
• 한 번에 하나의 정보만 저장할 수 있음

💡 XSS (Cross-Site Scripting)
: 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법, 자바스크립트를 사용하여 쿠키를 탈취할 수 있음
💡 스니핑 (Sniffing)
: 네트워크 상에서 전송되는 패킷을 캡쳐하여 이를 엿보는 행위, 네트워크를 통해 전송되는 쿠키값을 암호화하지 않고 전송하는 경우 스니핑을 통해 쿠키값을 탈취할 수 있음

쿠키의 사용

document.cookie = "cat=cute";

console.log(document.cookie);  // "cat=cute"

쿠키의 사용 예시

• 쇼핑몰의 장바구니 기능
• "오늘 더 이상 이 창을 보지 않음" 팝업

---

세션

📝 일정 시간 동안 같은 사용자(브라우저)로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 일정하게 유지시키는 기술

• 여기서 일정 시간은 방문자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점을 말함
  ⇒ 서버에 세션에 대한 정보(세션 상태, 클라이언트 상태, 세션 데이터 등)를 저장해 놓고 세션 ID를 클라이언트에게 주어 서버가 클라이언트를 식별할 수 있도록 하는 방식

특징

• 쿠키의 트래픽 문제와 보안상 취약점을 해결하기 위해 등장
• 쿠키를 기반으로 하며 서버에서 관리됨 (=세션 쿠키)
• 저장 개수나 용량에 제한이 없음 (서버 용량이 충분할 시)
• 각 클라이언트에게 고유 세션 ID를 부여함으로써 클라이언트를 구분해 요구에 맞는 서비스를 제공
• 데이터를 Hash Table에 저장하여 한번에 많은 정보를 하나의 세션 객체에 저장 가능
• 세션 ID를 담은 쿠키만 보내므로, 크기가 커도 네트워크 부하가 거의 없음

세션의 동작 방식

1. 클라이언트가 서버에 접속 시 클라이언트의 유일한 ID값인 세션 ID를 발급 (Set-Cookie를 통해)
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 서버에 전달해서 사용
4. 서버는 세션 ID를 전달 받아서 해당 세션을 찾아 클라이언트 정보를 가져옴
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

보장되어야 할 것

• Confidentiality (기밀성) : 서버 이외에는 어느 누구도 세션 데이터를 해석할 수 없어야 함
• Data integrity (데이터 무결성) : 서버와 별개로 세션 데이터를 조작해서는 안 됨(실수로 또는 악의적으로)
• Authenticity (확실성) : 서버를 제외하고는 올바른 세션을 시작할 수 없음

세션의 단점

• 서버에 데이터를 저장하므로 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨

세션의 사용

// JAVA
// 생성하기
session.setAttribute('키', 값);
// 가져오기
session.getAttribute('키');
// 삭제하기
session.removeAttribute('키');

세션의 사용 예시

• 화면이 이동해도 로그인이 풀리지 않고 로그아웃하기 전까지 유지

---

쿠키와 세션의 차이

• 쿠키와 세션은 비슷한 역할을 하며, 동작원리도 비슷함 ⇒ 세션도 결국 쿠키를 사용하기 때문
• 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용함
• 쿠키도 만료 기간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있음 또한 만료 기간을 넉넉하게 잡아두면 쿠키 삭제를 할 때 까지 유지됨
• 세션도 만료 기간을 정할 수 있지만 브라우저가 종료되면 만료 기간에 상관없이 삭제됨
• 쿠키는 정보를 포함하므로 서버에 요청시 속도가 빠르고 세션은 정보가 서버에 있기 때문에 처리가 요구되어 비교적 느린 속도를 냄
• 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 세션 ID만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋음

---

Web Storage API

📝 HTML5에서 쿠키의 단점을 보완해서 만든 기술, 쿠키와 마찬가지로 클라이언트에 대한 정보를 저장

• 쿠키와 동일하게 키-값 형태로 데이터를 저장하는 방식
• 데이터의 지속성에 따라 영구 저장소(Local Storage)와 임시 저장소(Session Storage)를 따로 두어 환경에 맞게 선택하여 사용 가능
• 둘 다 브라우저가 관리하며 window 객체 안에 들어있고, Storage 객체를 상속받으므로 메소드가 공통으로 존재함
• 웹 스토리지 조작은 Javascript 내에서만 수행됨 (서버가 HTTP 헤더를 통해 조작 불가능)
• 용량 제한이 쿠키에 비해 크며 브라우저별, 기기별(데스크탑, 모바일)로 다른 용량 제한을 가짐 (보통 데스크탑 기준 5MB ~, 모바일 2.5MB ~)
• 쿠키처럼 도메인 단위로 접근을 제한하고 있지만 클라이언트의 접근을 막고 있지는 않으므로 사용자가 저장된 값을 임의로 수정하지 못하도록 방어 코드 작성 필요
• 문자열이 아닌 키, 값은 문자열로 변환하여 저장함 ⇒ 객체를 저장하기 위해서는 JSON.stringify를 통해 객체 형식을 그대로 문자열로 변환함, 받을 때는 JSON.parse를 사용

  // 객체를 바로 저장
  
  localStorage.setItem('object', { a : 'b' });
  localStorage.getItem('object');   // [object Object]
  
  // 문자열 변환 후 저장
  
  localStorage.setItem('object', JSON.stringify({ a : 'b' }));
  JSON.parse(localStorage.getItem('object'));   // { a : 'b' }

sessionStorage

특징

• 세션 쿠키와 달리 탭/윈도우 단위로 세션 스토리지 생성
  ⇒ window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 삭제됨
• 윈도우 복제로 생성되거나 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성됨
• 잠시동안 필요한 정보를 저장할 때에 사용

사용

// 저장하기
sessionStorage.setItem('키', '값');
sessionStorage['키'] = '값';
sessionStorage.키 = '값';

// 가져오기
sessionStorage.getItem('키');

// 삭제하기
sessionStorage.removeItem('키');

// 스토리지 전체 비우기
sessionStorage.clear();

사용 예시

• 일시적으로 필요한 정보 ex) 입력 폼 저장 ex) 일회성 로그인 ex) 비로그인 장바구니
  

localStorage

특징

• 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장됨
• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능함
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용함
• 사용자 설정, 브라우저를 닫고 열어도 정보가 남아있어야 하는 것들을 저장할 때에 사용

사용

// 저장하기
localStorage.setItem('키', '값');
localStorage['키'] = '값';
localStorage.키 = '값';

// 가져오기
localStorage.getItem('키');

// 삭제하기
localStorage.removeItem('키');

// 스토리지 전체 비우기
localStorage.clear();

사용 예시

• 지속적으로 필요한 데이터
  • ex) 자동 로그인

---

쿠키와 Web Storage의 차이

• 서버 전송 여부:
  • 쿠키를 설정하면 모든 웹 요청시 쿠키가 포함되어 서버로 전송되지만 Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지 않음
• 영구적인 데이터 저장 가능 여부:
  • 쿠키는 만료 기간을 지정하므로 언젠가 제거되지만 Web Storage는 사용자가 삭제하지 않는 한 영구적으로 데이터를 보관할 수 있음
• 객체 정보 저장 가능 여부:
  • 쿠키는 한 번에 하나의 정보만 저장할 수 있지만 Web Storage에서는 문자열 기반 데이터 외에도 체계적으로 구조화된 객체를 저장할 수 있음