웹 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키의 차이점

웹 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키의 차이점

웹 애플리케이션에서 클라이언트 측에 데이터를 저장하는 주요 메커니즘은 로컬 스토리지(localStorage), 세션 스토리지(sessionStorage), 그리고 쿠키(Cookies)입니다. 이들은 각각 다른 특징과 용도를 가지며, 데이터의 지속성, 접근 방식, 보안 측면에서 중요한 차이를 보입니다.

1. 로컬 스토리지 (localStorage)

특징

• 지속성: 영구적입니다. 사용자가 명시적으로 데이터를 삭제하지 않는 한, 브라우저를 닫았다가 다시 열어도 데이터가 유지됩니다.
• 범위: 동일한 출처(origin - 프로토콜, 호스트, 포트)를 가진 모든 창과 탭에서 접근 가능합니다.
• 접근: 클라이언트 측 JavaScript 코드를 통해 동기적으로 접근합니다.
• 서버 통신: 저장된 데이터는 자동으로 서버로 전송되지 않습니다. 데이터를 서버로 보내려면 JavaScript 코드를 사용하여 HTTP 요청의 본문이나 헤더에 명시적으로 포함해야 합니다.

용도

• 사용자 설정 (테마, 레이아웃 등) 영구 저장
• 오프라인 데이터 캐싱
• 간단한 애플리케이션 상태 관리

보안 고려 사항

• XSS (Cross-Site Scripting) 취약: 악성 스크립트가 실행될 경우 로컬 스토리지에 저장된 데이터에 접근하여 탈취할 수 있습니다. 민감한 정보 (예: 인증 토큰) 저장은 권장되지 않습니다.

공식 문서 및 레퍼런스

• MDN Web Docs - Web Storage API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
• MDN Web Docs - Window.localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

2. 세션 스토리지 (sessionStorage)

특징

• 지속성: 현재 브라우저 세션 동안만 유지됩니다. 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다.
• 범위: 동일한 출처 내의 같은 창 또는 탭에서만 접근 가능합니다. 서로 다른 탭이나 창 간에는 데이터가 공유되지 않습니다.
• 접근: 클라이언트 측 JavaScript 코드를 통해 동기적으로 접근합니다.
• 서버 통신: 저장된 데이터는 자동으로 서버로 전송되지 않습니다. 데이터를 서버로 보내려면 JavaScript 코드를 사용하여 HTTP 요청의 본문이나 헤더에 명시적으로 포함해야 합니다.

용도

• 일시적인 사용자 입력 폼 데이터 저장
• 단일 세션 동안 필요한 애플리케이션 상태 관리
• 페이지 간의 임시 데이터 전달

보안 고려 사항

• XSS (Cross-Site Scripting) 취약: 로컬 스토리지와 마찬가지로 악성 스크립트에 의해 데이터가 탈취될 수 있습니다. 민감한 정보 저장은 주의해야 합니다.

공식 문서 및 레퍼런스

• MDN Web Docs - Web Storage API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
• MDN Web Docs - Window.sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

3. 쿠키 (Cookies)

특징

• 지속성: 만료 시간을 설정할 수 있습니다. 세션 쿠키는 브라우저를 닫을 때 삭제되고, 영구 쿠키는 설정된 만료일까지 유지됩니다.
• 범위: 특정 도메인 및 경로에 바인딩됩니다. 서버에서 Set-Cookie 헤더를 통해 범위를 지정할 수 있습니다.
• 접근: 서버는 HTTP 헤더(Cookie, Set-Cookie)를 통해 접근하며, 클라이언트 측 JavaScript 코드는 document.cookie API를 통해 접근할 수 있습니다 (HTTP-only 쿠키 제외).
• 서버 통신: 해당 쿠키의 도메인 및 경로 조건에 맞는 모든 후속 HTTP 요청의 Cookie 헤더에 자동으로 포함되어 서버로 전송됩니다. 서버는 Set-Cookie 헤더를 사용하여 쿠키를 설정, 갱신, 삭제할 수 있습니다.

용도

• 사용자 인증 (세션 관리, 토큰 저장 - HTTP-only 쿠키 권장)
• 사용자 추적 및 행동 분석
• 개인 설정 저장 (언어 설정 등)
• 광고 및 추천

보안 고려 사항

• XSS (Cross-Site Scripting) 취약: 클라이언트 측 JavaScript에서 접근 가능한 쿠키는 악성 스크립트에 의해 탈취될 수 있습니다. HttpOnly 플래그를 사용하여 JavaScript 접근을 막는 것이 중요합니다.
• CSRF (Cross-Site Request Forgery) 취약: 악의적인 웹사이트가 사용자의 의도와 다른 요청을 서버로 보내도록 유도할 수 있습니다. SameSite 속성을 사용하여 CSRF 공격을 완화할 수 있습니다.

공식 문서 및 레퍼런스

• RFC 6265 - HTTP State Management Mechanism: https://datatracker.ietf.org/doc/html/rfc6265
• MDN Web Docs - HTTP cookies: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
• MDN Web Docs - Document.cookie: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

---

요약

특징	로컬 스토리지/세션 스토리지	쿠키
통신 방향	주로 서버 -> 클라이언트 (클라이언트 측에서 명시적 전송 필요)	자동 쌍방향 (요청/응답 헤더에 자동 포함)
자동 서버 전송	아니요	예 (해당 도메인 및 경로 조건 충족 시)
저장 주체	클라이언트 (JavaScript)	서버 (Set-Cookie 헤더), 클라이언트 (document.cookie)
용도	주로 클라이언트 측 상태 관리 (영구적 또는 세션 기반)	인증, 사용자 추적, 설정 저장 등 (보안 설정에 따라 민감 정보 저장 가능)
보안 고려 사항	XSS 취약	XSS 취약 (JavaScript 접근 가능 시), CSRF 취약 (SameSite 속성으로 완화)

각 웹 스토리지 메커니즘의 특징을 이해하고, 애플리케이션의 요구 사항과 보안 고려 사항을 종합적으로 판단하여 데이터를 저장하는 최적의 방법을 선택하는 것이 중요합니다. 특히 민감한 정보를 다룰 때는 쿠키의 HttpOnly 및 SameSite 속성과 같은 보안 기능을 적극적으로 활용하는 것이 좋습니다.