로컬 스토리지, 세션 스토리지 그리고 쿠키 + IndexedDB
November 17, 2021
쿠키와 웹 스토리지(로컬 스토리지, 세션 스토리지)의 차이점, 쿠키의 옵션, 쿠키와 세션의 차이점, 세션 기반 인증 방식과 토큰 기반 인증 방식의 차이점을 알아보겠습니다.
이 시리즈는 총 4개의 글에 나눠 작성합니다.
쿠키는 매우 중요한 만큼 3개의 글에 걸쳐 등장합니다.
Keyplus를 개발하면서도 JWT를 저장하는 데에 쿠키를 사용하였으나 제대로 알고 사용하지 않았습니다. 이번 기회에 제대로 알아보려 합니다.
- 로컬 스토리지, 세션 스토리지 그리고 쿠키 👈🏻
- 쿠키 파헤치기
- 쿠키와 세션 + 캐시
- 세션 기반 인증과 토큰 기반 인증
웹 스토리지
웹 스토리지란 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소로, 키(Key)와 값(Value)의 쌍으로 데이터를 저장합니다.
로컬 스토리지와 세션 스토리지는 모두 웹 스토리지입니다. 두 스토리지는 모두 window 객체의 프로퍼티로서 존재하며, Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재합니다.
오리진별로 생성되며, 오리진별 용량 제한이 있습니다. 다른 오리진의 로컬 스토리지에는 접근이 불가능합니다.
쿠키와 다른 점
쿠키의 단점을 극복하기 위해 등장한 기술인 만큼 쿠키와 다른 점을 살펴보도록 하겠습니다.
- 요청할 때마다 서버에 자동으로 전송되는 것은 아닙니다.
- 다른 오리진에서 요청하는 경우에는 오리진 단위로 접근이 제한되는 특성 때문에 값을 꺼내 쓸 수 없기에 CSRF 공격으로부터 안전합니다.
- 대략 5MB까지의 데이터를 저장할 수 있으며, 유효기간이 존재하지 않습니다.
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.
쿠키
쿠키는 웹 스토리지가 등장하기 이전에 클라이언트 단(브라우저)에 데이터를 저장할 수 있던 작은 크기의 문자열을 의미합니다. (그렇다고 이제 사용하지 않는다는 것은 아닙니다.)
매번 서버에 자동으로 전송됩니다.
SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때에도 자동 전송되므로 CSRF 공격에 취약합니다. ➡️ 쿠키 파헤치기에서 자세히 알아보겠습니다.
대략 4KB까지의 데이터를 저장할 수 있으며, 유효기간이 존재합니다.
로컬 스토리지
window.localStorage 객체로서 존재합니다.
브라우저를 종료해도 데이터가 유지되며, 명시적으로 지우지 않는 한 영구적으로 저장됩니다.
서로 다른 탭이라도 동일한 origin이라면 동일한 로컬 스토리지를 사용합니다.
지속적으로 필요한 정보를 저장하기에 좋습니다. (자동 로그인 등)
세션 스토리지
window.sessionStorage 객체로서 존재합니다.
브라우저를 종료하면 데이터가 사라집니다.
페이지를 새로 고침할 때는 저장된 데이터가 사라지지 않지만, 탭을 닫으면 데이터가 사라집니다.
잠시 동안 필요한 정보를 저장하기에 좋습니다. (입력 폼 저장, 일회성 로그인 등)
IndexedDB란?
추가 예정
