RHUK2
NOTELLM

브라우저 저장소

브라우저 저장소 간 비교

브라우저 저장소에 저장된 데이터는 브라우저 메모리에 저장된 데이터가 아니기에, 새로고침 시에도 데이터가 남아있다.

특징로컬 스토리지세션 스토리지쿠키
데이터 저장 기간영구적 (삭제 시까지)세션 종료 시 (브라우저 탭 닫기)설정된 만료 시간까지
저장 용량약 5~10MB약 5~10MB약 4KB
데이터 접근클라이언트 측 (자바스크립트)클라이언트 측 (자바스크립트)클라이언트 및 서버 측
데이터 전송전송되지 않음전송되지 않음매 요청마다 서버로 전송 가능
보안XSS에 취약XSS에 취약XSS 및 CSRF에 취약
접근 범위도메인도메인 (탭 격리)도메인 및 경로
사용 예사용자 설정, 장기적인 상태 저장일시적인 상태 저장, 세션 기반 데이터사용자 인증, 세션 관리

보충 설명:

  • 로컬 스토리지

    • 공유 범위: 동일한 도메인(Origin) 내의 모든 탭과 창에서 데이터를 공유할 수 있다.
    • 브라우저 간 공유: 다른 브라우저 간에는 공유되지 않는다.
    • 사용 예: 사용자 설정, 장기적인 상태 저장 (예: 테마 설정, 사용자 선호도 등).

  • 세션 스토리지

    • 공유 범위: 같은 브라우저의 동일한 도메인 내의 단일 탭 또는 창에서만 데이터를 공유할 수 있다.
    • 다른 탭 간 공유: 동일한 도메인이라도 다른 탭이나 창 간에는 공유되지 않는다. (단, window.open 등으로 열린 탭은 세션 스토리지를 복제하여 공유될 수 있음)
    • 브라우저 간 공유: 다른 브라우저 간에도 공유되지 않는다.
    • 사용 예: 일시적인 상태 저장, 세션 기반 데이터 (예: 일시적인 폼 데이터, 일시적인 애플리케이션 상태).

  • 쿠키

    • 공유 범위: 기본적으로 동일한 도메인 내의 모든 탭과 창에서 데이터를 공유할 수 있다.
    • 도메인 제어: 쿠키의 Domain 속성을 설정하여 서브 도메인 간에도 데이터를 공유할 수 있다. 예를 들어, example.com에서 설정한 쿠키를 sub.example.com에서도 접근 가능하게 할 수 있다.
    • 브라우저 간 공유: 브라우저 간에는 공유되지 않는다.
    • 사용 예: 사용자 인증, 세션 관리 (예: 로그인 세션, 사용자 식별 정보).

쿠키 옵션 설명

옵션설명설정 위치보안
Name쿠키를 식별하는 데 사용된다. 동일한 도메인 내에서 고유해야 한다.Client, Server-
Value쿠키에 저장되는 데이터이다. 보안에 민감한 정보는 포함하지 않는 것이 좋다.Client, Server-
Domain특정 도메인 또는 하위 도메인에서만 쿠키를 사용할 수 있게 제한한다. 예: .example.com 설정 시 모든 하위 도메인에서도 쿠키가 사용된다.Client, Server-
Path특정 경로에서만 쿠키를 사용할 수 있게 제한한다. 예: /account 설정 시 /account와 그 하위 경로에서만 쿠키가 사용된다.Client, Server-
Expires쿠키의 유효 기간을 설정한다. 날짜를 지정하지 않으면 세션 쿠키가 되며, 브라우저를 닫으면 삭제된다. 예: expires=Wed, 21 Oct 2021 07:28:00 GMT.Client, Server-
Max-AgeExpires 대신 사용할 수 있으며, 초 단위로 유효 기간을 설정한다. 예: max-age=3600 설정 시 1시간 후에 쿠키가 만료된다.Client, Server-
Secure이 옵션을 설정하면 쿠키가 HTTPS 연결에서만 전송된다.Client, Server스니핑 공격 방지
SameSiteStrict, Lax, None 중 하나를 선택할 수 있다.Client, ServerCSRF 방지
HttpOnly이 옵션을 설정하면 JavaScript(document.cookie)를 통한 쿠키 접근을 방지할 수 있다.ServerXSS 방지

SameSite 옵션 값 설명:

  • Strict: 쿠키가 동일 사이트(Same-Site) 요청에서만 전송된다. 타 사이트에서의 모든 요청(링크 클릭 포함)에는 쿠키가 전송되지 않는다.
  • Lax (Default): 쿠키가 동일 사이트 요청과 안전한(Safe) HTTP 메서드(GET 등)를 사용한 최상위 내비게이션(Top-level navigation, 예: 링크 클릭) 요청에서만 전송된다. fetch, XHR, iframe, img 등의 크로스 사이트 요청에서는 전송되지 않는다.
  • None: 모든 크로스 사이트 요청에서 쿠키가 전송된다. 이 옵션을 사용할 경우 Secure 옵션을 반드시 함께 설정해야 한다.