내일배움캠프 TIL (230220): localStorage & SessionStorage

JWT 토큰을 통한 인증과 인가 방식을 공부하다가 브라우저 내 저장소인 웹 스토리지(web storage)에 대한 이해가 부족한 것 같아 정리하는 글.

로컬 스토리지와 세션 스토리지

- 로컬 스토리지(localStorage): 브라우저에 데이터를 간단하게 저장할 수 있는 곳.
window 객체에 localStorage 객체가 있으므로 위치에 상관없이 사용할 수 있으며, 저장된 데이터는 기간 제한이 없다.
문자형 데이터만 저장 가능하다. (숫자형, 객체형 데이터 저장 시 문자형으로 변환)
도메인 같으면 다른 창이라도 데이터를 공유한다.

localStorage.setItem('key', 'value') // 로컬스토리지에 key-value 저장하기
localStorage.getItem('key') // 로컬스토리지에서 key에 맞는 value 가져오기
localStoage.length // 저장된 key-value 쌍의 개수
localStorage.removeItem() // 로컬스토리지에 저장된 특정 값 지우기
localStorage.claer() // 로컬스토리지 청소하기

- 세션 스토리지(sesstionStorage): localStorage와 비슷한 기능으로 세션이 종료(브라우저 닫기)되면 데이터도 함께 삭제된다.
새창, 새탭의 단위로 스토리지가 생성된다.

jwt 토큰을 웹 스토리지에 저장할 수 있지만 탈취 위험성이 크기 때문에 저장하는 것을 권장하지 않는다.

쿠키도 클라이언트에서 보관하기 때문에 탈취 위험성은 있으나 http only 옵션을 설정하면 보안성이 그보다는 높아진다. (XSS(Cross Site Scripting) 공격 차단 가능)

하지만 여전히 클라이언트에서는 탈취 위험성이 있으므로 전통적으로는 세션 ID를 서버에 저장하는 방법이 있다.

jwt / 쿠키 / 세션 등 인증 방식에 대한 자세한 내용은 추가로 정리해서 올릴 예정이다.