[1주차 TIL] KnockOn Bootcamp Cookie & Session

쿠키(Cookie)

• 쿠키는 클라이언트(브라우저)에 저장하는 데이터입니다.
• 쿠키의 특징
  1. 클라이언트에 저장(서버에 부담 적음)
  2. 유효 기간 설정 가능
  3. 브라우저에 저장되므로 보안에 상대적으로 취약함
  4. 크기 제한 있음(대략 4KB)
• 쿠키의 동작 흐름
  1. 서버가 클라이언트에 쿠키 저장
  2. 브라우저는 쿠키 저장
  3. 클라이언트가 서버 요청 시 쿠키 자동 전송
  4. 서버는 쿠키를 읽고 처리

 

세션 (Session)

• 세션은 서버에 저장하는 사용자 정보입니다.
• 세션의 특징
  1. 서버에 저장(더 안전)
  2. 서버가 메모리에 저장하므로 서버에 부하 발생할 수 있음
  3. 일정 시간 동안 활동 없으면 세션 만료
  4. 서버에 있기 때문에 민감한 정보 저장 가능함
• 세션의 동작 흐름
  1. 사용자가 로그인 → 서버가 세션 생성
  2. 서버가 세션 ID를 클라이언트에 전달 (보통 쿠키 사용)
  3. 사용자는 요청할 때마다 세션 ID 전달
  4. 서버는 세션 ID로 사용자 식별

 

쿠키와 세션의 발전 과정

1. 초창기 웹은 상태가 없는 HTTP 프로토콜
     - HTTP는 무상태(Stateless) 프로토콜
     - 사용자가 서버에 요청할 때마다 "누가 보냈는지" 알 수 없음
     - 서버는 요청을 받을 때마다 매번 새 사용자인지 기존 사용자인지 모름
2. 쿠키의 등장 (1994년, Netscape)
   -  HTTP의 한계를 보완하기 위해 쿠키 등장
   -  서버가 클라이언트에게 데이터를 저장하게 하고, 이후 요청마다 서버로 자동 전송
   -  사용자가 서버에 여러 번 접근할 때 같은 사용자라는 걸 알 수 있게 됨
   -  장점 : 로그인 유지, 사용자 식별, 맞춤형 서비스 제공
   -  단점 : 민감한 정보는 클라이언트에 저장되므로 보안에 취약
3. 세션의 등장
   -  쿠키만으로는 민감한 정보를 다루기 어려움
   -  서버에 사용자 정보를 저장하고, 사용자에게는 세션 ID만 전달
   -  세션 ID는 보통 쿠키에 저장하거나 URL 파라미터로 전달
   -  서버가 관리하므로 보안이 강화됨
   -  장점 : 서버에서 관리하므로 보안성 높음
   -  단점 : 서버 메모리를 사용하므로 사용자가 많아지면 부하 발생
4. 보안 강화를 위한 발전
   쿠키와 세션이 널리 쓰이면서 여러 보안 이슈 등장
     - 세션 하이재킹 (Session Hijacking)
     -  쿠키 탈취 (Cross-Site Scripting - XSS)
     -  CSRF (Cross-Site Request Forgery)
   보안 옵션 등장
     -   HttpOnly: JavaScript 접근 제한
     -   Secure: HTTPS에서만 전송
     -   SameSite: CSRF 방지
     -   세션 관리 기법 발전: 세션 타임아웃, 토큰 갱신, 서버 클러스터링 등
5. 토큰 기반 인증 (JWT 등)
   - 서버 부하를 줄이고, 분산 시스템에서 인증을 원활히 처리하기 위해 JWT (JSON Web Token) 같은 토큰 기반 인증 방식 등장
   - 서버가 상태를 유지하지 않는 방식 (Stateless)으로 인증 가능
   - 특히 모바일 앱, 마이크로서비스 아키텍처에서 활발히 사용
   - 장점: 서버 메모리 사용 없음, 분산 시스템에 유리
   - 단점: 토큰 탈취 시 위험 (만료 시간 및 보안 처리 필수)

 

---

JWT (JSON Web Token)

• JWT는 서버나 클라이언트가 정보를 JSON 형식으로 저장하고 전달하는 토큰 기반 인증 방식입니다.
  - JWT는 사용자가 누구인지 증명하는 데 사용되는 토큰입니다.
  - 토큰 안에 사용자의 정보가 암호화되어 들어 있고, 별도의 세션 저장소 없이 인증할 수 있게 해줍니다.
• JWT 구조 : JWT는 총 3부분으로 구성됨 (xxxxx.yyyyy.zzzzz)
  1. Header(헤더)
      - 토큰 타입과 해시 알고리즘 정보
  

  {
    "alg": "HS256",
    "typ": "JWT"
  }

  
  2. Payload(페이로드)
      - 사용자 정보 (claims) 가 담긴 부분
      -  예: 유저 ID, 권한, 토큰 유효 기간 등
  

  {
    "sub": "1234567890",
    "name": "Alice",
    "iat": 1712311820
  }

  
  3. Signature(서명)
      -  위의 내용이 변조되지 않았음을 증명
      -  비밀 키로 생성 (예: HMAC SHA256)
  
  => 세 부분(1, 2, 3)이 base64로 인코딩되어 하나의 문자열로 만들어짐
  
• JWT의 장점
  - Stateless: 서버가 세션을 저장할 필요 없음
  - 확장성: 서버가 여러 대여도 세션 공유할 필요 없음
  - 빠름: 토큰만 있으면 빠르게 사용자 검증
  - 유연성: 모바일/웹/API 어디서나 사용 가능
• JWT의 단점
  - 토큰 탈취 시 위험: 토큰이 유출되면 악용될 수 있음
  - 토큰 폐기 어려움: JWT는 자체적으로 만료 전까지 유효. 서버가 토큰을 즉시 무효화하려면 별도 블랙리스트 관리가 필요
  - Payload가 암호화된 것은 아님 (Base64로 인코딩된 것이라 누구나 읽을 수 있음, 민감정보 저장 금지)

 

---

브라우저 저장소

 

저장소	데이터 크기	만료 기간	접근 범위	용도
쿠키 (Cookie)	매우 작음 (~4KB)	설정 가능	서버 & 클라이언트	인증 정보, 세션 식별자 등
Local Storage	크고 (~5MB)	없음 (영구 저장)	클라이언트 전용	사용자 설정, 캐시 데이터 등
Session Storage	Local Storage와 유사 (~5MB)	브라우저 탭이 닫히면 삭제	클라이언트 전용	일회성 데이터, 탭 단위 저장
IndexedDB	매우 큼 (수백 MB 이상)	없음	클라이언트 전용	복잡한 구조화된 데이터 저장 (오프라인 앱 등)

 

1. 쿠키 (Cookie)
   - 서버와 함께 사용하는 유일한 저장소
   - 매 요청마다 자동으로 서버에 전송됨
   - 세션 ID 저장 등 인증 목적으로 많이 사용
   - 용량이 적고, 서버로 전송되므로 주의 필요
   - 보안 옵션: HttpOnly, Secure, SameSite
   

   document.cookie = "token=abc123; path=/; max-age=3600";

    
2. Local Storage
   - 브라우저에 데이터 영구 저장
   - 서버로 자동 전송되지 않음 (수동으로 꺼내서 사용해야 함)
   - 브라우저를 꺼도 남아있음
   - 용량이 쿠키보다 훨씬 큼 (~5MB)
   

   localStorage.setItem("theme", "dark");
   const theme = localStorage.getItem("theme");

    
3. Session Storage
   - Local Storage와 비슷하지만 세션 단위 저장소
   - 브라우저 탭이나 창이 닫히면 데이터 삭제
   - 다른 탭이나 창과 공유되지 않음 (탭 고유 저장소)
   

   sessionStorage.setItem("tempData", "12345");
   const tempData = sessionStorage.getItem("tempData");

    
4. IndexedDB
   - 구조화된 대용량 데이터를 저장하는 비관계형 데이터베이스
   - 오프라인 웹 애플리케이션에서 많이 사용
   - 비동기적으로 작동하고, 키-값 쌍으로 데이터 저장
   - 크기가 수백 MB까지 가능!
   - IndexedDB는 코드가 복잡해서 라이브러리를 주로 사용