웹 스토리지 보안 경계

저장 범위 확인

localStorage는 같은 origin에서 오래 남고, sessionStorage는 탭 단위로 사라져 임시 작성 상태에 맞습니다.

수명

객체는 JSON.stringify와 parse를 거치며, 스키마 변경이나 파싱 실패를 방어해야 합니다.

형식

읽기 쓰기가 메인 스레드를 막으므로 큰 데이터나 잦은 업데이트에는 IndexedDB가 더 맞습니다.

성능

스크립트가 읽을 수 있는 저장소이므로 XSS가 발생하면 값도 노출된다고 보고 설계합니다.

XSS

localStorage

테마, 최근 선택, 비민감 사용자 설정 오래 남아도 문제가 없는 작은 문자열 데이터에 적합합니다.

장기

sessionStorage

탭 안에서만 유지할 임시 흐름 상태 결제 단계나 폼 초안처럼 새 탭과 공유되면 안 되는 값에 맞습니다.

탭

Cookie/IndexedDB

서버 전송은 Cookie, 대용량 구조화 데이터는 IndexedDB 저장소 이름보다 접근 주체와 데이터 크기를 기준으로 나눕니다.

대안

민감정보 access token 저장은 XSS 모델을 먼저 검토하고 필요하면 HttpOnly 쿠키를 고려합니다.

파싱 방어 JSON parse 실패와 누락 필드를 기본값으로 복구하는 코드를 둡니다.

용량과 빈도 큰 목록을 계속 저장한다면 localStorage가 아니라 IndexedDB나 서버 캐시를 검토합니다.

function readTheme() {
  try {
    return localStorage.getItem('theme') ?? 'system';
  } catch {
    return 'system';
  }
}