[Web] Cookie, Web Storage

Kimyujin·2021년 8월 2일

Web Storage cookie local storage session storage

1. HTTP

HTTP는 서버와 클라이언트가 데이터를 주고받기 위한 프로토콜이다.
웹 서비스라면 사용자를 식별해서 무언가를 해야할텐데(맞춤 추천, 장바구니 유지 등)
HTTP는 stateless 프로토콜이기 때문에, 사용자를 식별하거나 임시 데이터를 저장하기 위해서는 상태관리가 필요하다.

HTTP의 stateless는 무슨 의미일까?

통신이 끝나면 상태를 유지하지 않는 특징.

연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

HTTP 통신을 통해 주고받는 데이터 조각
클라이언트를 식별하기 위해 사용
임시 저장하는(파기일이 있는) session cookie(세션 쿠키)와 디스크에 저장되는 persistent cookie(지속 쿠키)가 있다.

2-1. Cookie의 사용 예시

세션 관리: 서버에 저장해야할 로그인, 장바구니, 스코어
개인화: 사용자 테마
트래킹: 사용자의 행동 기록,분석

2-2. Cookie의 단점

용량 제한 : 도메인당 20개, 개당 4KB의 데이터 저장 제한이 있다.
보안 취약 : 암호화 되지 않은 상태로 주고받기 때문에, 임의로 수정하거나 가로채기 쉽다.

3. Web Storage

HTML5 이후 나온 웹 저장소 (이전에는 Cookie만 있음)
HTTP 통신을 하지 않는 저장소
시크릿 모드에서는 동작하지 않음

3-1. Session Storage & Local Storage 비교

비교	Session Storage	Local Storage
파기일	세션이 끝날 때 파기	지우지 않으면 영구 보관
범위	세션(동일 탭)	도메인
보안	여전히 보안 이슈 있음	여전히 보안 이슈 있음
사용	일회성 로그인	민감하지 않은 데이터

3-2. 보안 문제

Local Storage는 디스크에 저장되기 때문에 웹 브라우저가 종료되더라도 디스크에 데이터가 남아 있게 된다. 데이터를 지우도록 프로그램을 개발 했다고 하더라도 웹 브라우저가 비정상적으로 종료되는 경우 데이터가 삭제되지 않을 수 있기 때문에 보안적으로 문제가 되는 데이터의 저장시 보안 이슈를 해결할 수 있는 대책을 마련하지 않고는 사용해서는 안된다.

많은 참고자료에서 공통적으로 하는 말이 있다. Cookie도 보안 이슈가 있는데, Web Storage도 여전히 보안이 좋지 않다고 한다.
결론적으로 민감한 데이터는 암호화를 해서 저장해야하며, Local Storage만 쓸게 아니라, 탭 내에서만 사용할 수 있는 Session Storage를 적절히 사용하는 것이 좋을 것 같다.

3-3. Local Storage 사용 방법

(1) 가져오기

// Local Storage에서 userData로 저장된 정보를 가져온다.
JSON.parse(localStorage.getItem('userData'));

(2) 저장하기

// Local Storage의 userData라는 이름으로(key)
// updatedData를 저장한다.(value)
const updatedData = {[id: 1, name: 'jelly'], [id: 2, name: 'brown']};
localStorage.setItem('userData', JSON.stringify(updatedData));