클라이언트 저장소 3인방
로컬스토리지
로컬스토리지는 브라우저를 닫아도 살아남는 클라이언트 저장소입니다. 설정값이나 UI상태처럼 오래 유지해야하는 데이터에 적합합니다.
- 유효기간 : 영구
- 범위 : 같은 Origin
- 용량 : 5MB 이하
- 서버 전송 : X
- 접근 : JS 전용
세션 스토리지
탭 단위로 격리되어 탭을 닫으면 자동 삭제됩니다. 결제 플로우나 멀티스텝 폼처럼 "이 탭에서만, 그리고 잠깐만" 필요한 데이터에 적합합니다.
- 유효기간 : 탭 닫으면 사라짐
- 범위 : 현재 탭만
- 용량 : 5MB 이하
- 서버 전송 : X
- 접근 : JS 전용
쿠키
쿠키는 세 가지 중 유일하게 서버로 자동 전송됩니다. HttpOnly 플래그를 붙이면 JS에서 읽을 수 없어서 인증 토큰을 XSS 공격으로부터 안전하게 보호할 수 있어요. 단, 용량이 4KB로 아주 작습니다.
- 유효기간 : 설정 가능(기본은 세션)
- 범위 : 같은 Origin
- 용량 : 4KB 이하
- 서버 전송 : HTTP 요청마다 자동전송
- 접근 : JS + 서버 모두
우리는 이 내용들 중 쿠키에 대해 조명할 필요가 있습니다.
쿠키가 중요한 이유?
쿠키는 다른 두 저장소와는 다르게 서버에서 접근이 가능하고 보안옵션이 존재한다는 점에서 더 자세히 볼 필요가 있습니다.
동작 원리
쿠키는 최초의 서버 요청에서 Set-Cookie로 한번 심어두면 이후에 모든 요청에 자동으로 실려갑니다. 이를 이미지로 보면 다음과 같습니다.
속성
쿠키의 속성들은 Set-Cookie 헤더에 심을 수 있으며 내용은 이렇게 됩니다.
- HttpOnly : JS에서 접근을 막습니다. 그로 인해document.cookie로 토큰 탈취를 막고 XSS 공격으로부터 쿠키를 지킵니다.
- Secure : HTTPS 연결에서만 전송을 합니다.
- SameSite : 외부사이트에서의 쿠키 전송을 제어합니다. CSRF 공격을 방어합니다.
- Max-Age : 초 단위 유효기간입니다. 없다면 세션쿠키로 인식되어 탭을 닫으면 사라집니다
- Path : 쿠키를 전송할 URL 경로입니다.
- Domain : 서브도메인 포함 여부를 결정합니다.