본문 바로가기
Frontend

쿠키, 세션, 웹 스토리지 차이

by 프로그레머 2024. 3. 6.

 

쿠키, 세션, 웹 스토리지 차이

 

 

쿠키(Cookies), 세션(Sessions), 웹 스토리지(Web Storage)는 웹 개발에서 클라이언트 상태를 관리하기 위해 사용되는 기술이다

각각의 기술은 다른 방식으로 데이터를 저장하며,

기 다른 목적과 제한 사항을 가지고 있다

 

쿠키 (Cookies)

  • 클라이언트(브라우저)에 작은 데이터 조각을 저장하는 기술
  • 서버는 HTTP 응답 헤더를 통해 쿠키를 클라이언트에 설정하고, 이후 클라이언트는 동일한 서버로의 모든 요청에 이 쿠키를 포함하여 전송
  • 쿠키는 사용자 세션을 관리하고, 사용자 선호도를 저장하며, 추적 정보를 수집하는 데 주로 사용
  • 제한 사항
    • 크기 제한: 약 4KB
    • 브라우저마다 저장할 수 있는 쿠키의 수가 제한적
  • 보안
    • 쿠키 데이터는 암호화되지 않고 일반 텍스트로 전송됨
    • 그러므로 민감한 데이터를 저장하기에는 적합하지 않음
    • Secure와 HttpOnly 플래그를 사용하여 보안 강화 가능

 

세션 (Sessions)

  • 서버 측에서 사용자 정보를 저장하는 방법으로 클라이언트가 서버에 요청을 보낼 때 생성되며 사용자의 상태를 추적하고 관리하는 데 사용
  • 클라이언트는 서버로 부터 받은 고유한 세션 ID를 쿠키를 통해 저장하며, 이 ID를 사용해 서버에 해당 사용자의 세션 데이터에 접근
  • 세션은 사용자가 로그인 상태를 유지하는 데 주로 사용됨
  • 제한 사항
    • 서버의 메모리를 사용하기 때문에 대규모로 사용자가 증가할 경우 서버 자원에 부담을 줄 수 있다
  • 보안
    • 세션 ID가 쿠키를 통해 클라이언트와 서버 간에 전송됨
    • 쿠키의 보안 취약점에 영향을 받을 수 있음
    • 그러나 실제 데이터는 서버 측에 저장되므로 데이터 자체는 노출되지 않음

 

웹 스토리지 (Web Storage)

  • HTML5에 도입된 기술
  • 더 많은 양의 데이터를 클라이언트 측에 안전하게 저장 가능
  • 웹 스토리지에는 두 가지 종류
    • localStorage
      • 데이터가 브라우저를 여닫거나 다시 시작해도 유지됨
      • 사용자가 수동으로 삭제하지 않는 한 사라지지 않음
    • sessionStorage
      • 데이터는 페이지 세션 동안만 유지됨
      • 탭이나 브라우저 닫으면 데이터 삭제
  • 제한 사항
    • 보통 5MB 내외의 데이터를 저장할 수 있으나, 웹 사이트마다 독립적으로 저장 공간을 가짐
  • 보안
    • 쿠키와 달리 HTTP 요청과 함께 자동으로 전송되지 않으므로 CSRF 공격 위험이 없음
    • 그러나 XSS 공격에 취약할 수 있으므로 스크립트를 통한 접근을 신중히 관리해야 함

 

각 기술은 데이터 저장 방식, 생명주기, 보안 측면에서 차이를 보이므로

애플리케이션 요구 사항에 따라 적절한 기술을 선택해 사용해야 함

'Frontend' 카테고리의 다른 글

이벤트 루프와 태스크 큐 설명  (0) 2024.03.06
로그인 처리 시 쿠키와 세션 어떻게 사용하는가  (0) 2024.03.06
CORS  (0) 2024.03.06
Webpack, Babel, Polyfill  (0) 2024.03.06
DNS  (0) 2024.03.06