브라우저 저장소 차이점
브라우저에는 데이터를 저장할 수 있는 여러 가지 저장소가 있다. 각 저장소의 특징과 차이점을 알아보자.
브라우저 저장소 종류
LocalStorage
- 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능하다.
- 도메인 별로 로컬스토리지가 생성된다.
- 최대 크기는 5MB이다.
- 사용 예시: 자동 로그인, 테마 설정 등
SessionStorage
- 세션 종료 시(브라우저 탭을 닫으면) 클라이언트에 대한 정보를 삭제한다.
- 최대 크기는 5MB이다.
- 사용 예시: 입력 폼 정보, 비로그인 장바구니
Cookie
- 쿠키는 모든 웹 요청에 자동으로 포함된다.
- 그래서 서버 부하가 커질 수 있다는 단점이 있다.
- 그런 이유로 최대 크기를 4KB로 제한하여 작고 가벼운 텍스트만 저장할 수 있도록 되어 있다.
LocalStorage vs Cookie
- Cookie: 브라우저가 알아서 서버로 가는 모든 요청에 정보를 붙여서 보낸다.
- LocalStorage: JavaScript로 직접 제어하여 전송해야 한다.
- 쉽게 말해 쿠키는 "자동 발송", 로컬스토리지는 "수동 발송"이다.
서버 인증과 브라우저 저장소
브라우저 저장소를 이해했다면, 실무에서 가장 많이 다루는 인증 처리에 어떻게 활용되는지를 알아야 한다.
1. 주요 정보를 요청 헤더에 넣는 방법
2. Session + Cookie 방식
- 서버가 세션을 관리하므로 서버 부하가 증가하고, 세션 하이재킹 공격에 취약하다.
3. JWT (JSON Web Token) 방식
- JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 claim 기반 웹 토큰이다.
- JWT는 토큰 자체를 정보로 사용하는 self-contained 방식으로 정보를 안전하게 전달한다.
- 별도의 세션 저장소가 필요 없이 JWT를 발급하고 검증하면 되어 확장성이 뛰어나다.
- 그러나 payload 정보가 제한적이고 JWT 길이가 길다는 단점이 있다.
실무에서의 토큰 저장 전략
JWT 방식을 사용한다면 토큰을 어디에 저장할지도 중요하다.
LocalStorage의 보안 문제
- 로컬스토리지는 JavaScript 접근이 쉽게 가능하여 XSS(크로스 사이트 스크립팅) 공격에 취약하다.
- 그래서 인증 토큰을 로컬스토리지에 그대로 저장하는 것은 위험할 수 있다.
실무에서의 일반적인 방식
- refreshToken: HttpOnly 옵션을 설정한 안전한 쿠키에 저장하여 관리한다. HttpOnly 쿠키는 JavaScript로 접근할 수 없기 때문에 XSS 공격으로부터 보호된다.
- accessToken: 수명이 짧기 때문에 보통 메모리 혹은 로컬 변수로 관리한다.
최종 정리
브라우저 저장소에는 LocalStorage, SessionStorage, Cookie가 있습니다. LocalStorage는 영구 보관이 가능하고 5MB까지 저장할 수 있지만 JavaScript로 접근이 쉬워 XSS에 취약합니다. SessionStorage는 탭을 닫으면 사라지고, Cookie는 4KB로 작지만 모든 요청에 자동으로 포함된다는 차이가 있습니다. 서버 인증 방식은 단순한 헤더 전송에서 Session/Cookie 방식을 거쳐 JWT 방식으로 발전해 왔고, JWT는 별도의 세션 저장소 없이 토큰 자체로 정보를 전달하여 확장성이 뛰어납니다. 실무에서는 refreshToken을 HttpOnly 쿠키에 저장하여 XSS 공격을 방지하고, accessToken은 수명이 짧으므로 메모리에서 관리하는 방식이 일반적입니다.
댓글 0
