Web Storage 와 Cookie

웹 스토리지(Web Storage)

브라우저 내에 key-value 형태로 데이터를 저장할 수 있는 저장소로 localStorage 와 sessionStorage 가 존재한다.

주요 특징

• 네트워크 요청 시 서버로 전송되지 않는다.
• 최소 2MB 혹은 그 이상의 데이터를 저장할 수 있다.
• 모든 웹 스토리지 객체 조작은 자바스크립트 내에서 실행된다. 따라서 서버가 http 헤더를 사용하여 스토리지 객체를 조작할 수 없다.
• 웹 스토리지 객체는 domain, protocol, port 로 정의되는 origin 에 묶여 있으므로 protocol 과 sub-domain이 다르면 데이터에 접근할 수 없다.storage 이벤트web storage 에서 데이처가 갱신되면 storage event 가 실행된다.
• key - 변경된 데이터의 키( .clear()를 호출했다면 null )
• oldValue - 이전 값(key 가 추가 되었다면 null)
• newValue - 새로운 값(key 가 삭제 되었다면 null)
• url - 갱신이 발생한 문서의 url
• storageArea - 갱신이 발생한 localStorage, sessionStorage 객체
  storage event 는 event 를 발생시킨 storage 를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 발생한다.localStorage
• origin이 동일한 경우( domain, protocol, prot 가 같다면, url 경로는 일치하지 않아도 된다. ) 모든 탭과 창에서 데이터가 공유된다.
• browser 혹은 os 가 재시작 되어도 데이터가 파기되지 않는다.sessionStoragelocalStorage 와 제공하는 프로퍼티, 메소드는 동일하지만 훨씬 제한적이다.
• 현재 떠 있는 탭 내에서만 데이터가 유지된다.
• 페이지를 새로고침 해도 데이터가 유지 되지만, 탭을 닫고 새로 열게 되면 데이터가 사라진다.

쿠키(Cookie)

브라우저에 저장되는 작은 크기의 문자열로 주로 웹서버에 의해 만들어진다. 서버가 http 응답 헤더에 Set-Cookie 에 내용을 넣어 전달하면 브라우저는 이 내용을 저장하는데 이것이 쿠키이다. 저장된 쿠키는 동일한 서버(사이트)에 접속할 때마다 Cookie 요청 헤더에 쿠키의 내용을 함께 전달한다.

쿠키를 사용한 인증 로직

쿠키는 클라이언트 식별과 같은 인증에 주로 사용된다.

1. 사용자가 로그인 하면 서버는 http 응답 헤더의 Set-Cookie에 담긴 session identifier(세션 식별자) 정보를 사용해 쿠키를 설정한다.
2. 사용자가 동일 도메인에 접속하면 브라우저는 http Cookie 헤더에 인증 정보가 담긴 고유값(세션 식별자)을 함께 담아 서버에 요청을 보낸다.
3. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 사용하여 사용자를 식별한다.
   document.cookie 프로터피를 사용하면 브라우저에서도 쿠키에 접근할 수 있다.

클라이언트의 JavaScript 를 통해서만 조작할 수 있는 웹 스토리지와 달리
쿠키는 http 헤더를 사용하여 쿠키를 설정하고 관리할 수 있다. (http 헤더를 통해 직접 조작 가능한 유일한 클라이언트 측 스토리지 메커니즘)

http 헤더를 사용한 쿠키 관리

1. 쿠키 관리
   • 쿠키 설정 Set-Cookie
   • 쿠키 삭제 Set-Cookie, 만료 날짜를 과거로 설정하여 쿠키 제거
2. CSP (Content Security Policy)
   클라이언트 측 스크립트 실행을 제한, 간접적으로 웹 스토리지 사용에 영향을 줄 수 있다.
3. Clear-Site-Data
   브라우저에 저장된 사이트 데이터(쿠키, 스토리지 등)를 지울 수 있다.
4. Permission-Policy
   특정 브라우저 기능을 제한할 수 있다.
5. X-Frame-Option
   iframe 내에서의 페이지 로드를 제어한다.

쿠키의 종류

1. 유형 선택
   • maxAge 또는 expires 옵션을 설정하지 않으면 기본적으로 session cookie 가 된다.
   • maxAge 또는 expires 옵션을 설정하면 persistent cookie(영구 쿠키)가 된다.
2. 보안 옵션
   • secure: true 를 설정하면 secure cookie
   • sameSite 를 설정하면 sameSite cookie
   • httpOnly: true 를 설정하면 httpOnly cookie, 하지만 이 설정은 보안 상의 이유로 서버 측에서 구현해야 한다.
3. 기타
   • third party cookie : 사용자가 방문 중인 도메인이 아닌 다른 도메인에서 설정한 쿠키
   • super cookie: 영구 쿠키보다 더욱 영구적이며 삭제가 어려운 쿠키
   • zombie cookie: 삭제된 이후 스스로 다시 자동적으로 생성되는 쿠키

Session Cookie

• 브라우저 세션이 끝날 때(일반적으로 브라우저를 닫을 때) 삭제되는 쿠키
• 상태 관리를 위해 user session 을 추척할 때 사용된다.

Persistent Cookie

• 지정된 기간동안 사용자의 기기에 남아 있음
• 만료 날짜가 존재하면 해당 날짜까지 데이터가 유지된다.
• 장기적인 tracking, 사용자 선호도를 기억하기 위해 사용된다.

Secure Cookie

• 보안 https 연결을 통해서만 전송된다.
• 중간자 공격 방지에 도움이 된다.

HttpOnly Cookie

• 클라이언트 측 스크립트에 접근할 수 없다.
• 크로스 사이트 스크립팅(XSS) 공격 방지에 도움이 된다.

SameSite Cookie

• 크로스 사이트 요청과 함께 쿠키가 전송되는 방식을 제어한다.

Third-party Cookie

• 주로 추적 및 온라인 광고 목적으로 사용된다.
• 프라이버스 우려로 인해 최신 브라우저에서는 사용이 점차 제한되고 있다.

Super Cookie

• 표준 http 쿠키 이외의 브라우저 저장 메커니즘을 사용한다.
• i.e. flash cookie, html5 저장 메커니즘이 있다.

Zoombie Cookie

• 여러 저장 메커니즘을 사용한다.

출처

- 모던 JavaScript 튜토리얼

- HTTP 쿠키 | 김정환 블로그