Web Storage ( 브라우저 저장소 )와 쿠키

쿠키란?

HTTP 쿠키 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각이다.

Stateless 한 HTTP 프로토콜의 상태 저장 정보를 기억하는데 사용된다.

Stateless 란?

모든 HTTP Request는 완전히 독립되어 전후 요청에 영향을 받지 않는다.

즉, 이전 요청에 대한 데이터를 따로 저장하지 않으면 서버에서 매번 모든 데이터를 보내야 한다.

이를 극복하기 위해 쿠키 ( 외 다양한 Storage )를 사용한다.

 

쿠키 특징 

HTTP 요청이 있을 때마다 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.

HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다.

쿠키는 개수와 용량에 제한이 있으며 만료일자를 지정하게 되어 있다.

만료일자를 지정하지 않으며 세션쿠키가 된다. 세션 쿠키는 웹 브라우저를 닫을 때 삭제된다.

쿠키 사양

쿠키 지원을 위해 브라우저가 다음의 요건을 충족할 것을 명시한다.

- 4,096 바이트 (4KB) 크기의 쿠키를 지원할 것

- 한 도메인 당 최소 50개의 쿠키를 지원할 것

- 총 최소 3,000개의 쿠키를 지원할 것

쿠키 설정

쿠키는 Set-Cookie HTTP Header를 사용하여 설정되며 이는 웹 서버의 HTTP 응답을 통해 송신된다.

이 헤더는 웹 브라우저가 쿠키를 저장하고 이를 이후 서버 요청 시 송신할지 지시한다.

쿠키 제어 옵션

1. Secure : HTTPS 프로토콜 상 암호화된 요청일 경우에만 전송된다.

2. HttpOnly : Cross-site 스크립트 공격을 방지. 자바스크립트 document.cookie API 접근을 막는다.

3. Domain : 도메인이 일치하는 요청에서만 쿠키가 전송된다.

4. Path : 패스가 일치하는요청에서만 쿠키가 전송된다.

5. SameSite : 쿠키가 cross site 요청과 함께 전송되지 않음을 요구 -> 위조 공격에 대한 보호 방법

6. Expires: 쿠키 만료 날짜를 설정한다.

7. Max-Age: 쿠키 수명을 설정, Expires는 무시된다.

Web Storage란?

Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다.

 

Web Storage는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다.

LocalStorage (영구) SessionStorage (임시) 를 따로 두어 데이터의 지속성을 구분할 수 있다.

 

용량제한이 5MB로 크며 만료기한의 설정이 없다.

쿠키와 마찬가지로 사이트의 도메인 단위(페이지 프로토콜별)로 접근이 제한된다.

 

특히 HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 저장소에 저장된다.

(http://mywebpage.com 와 https://mywebpage.com은 다른 저장소를 가진다.)   

 

저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지는 않아 네트워크 트래픽 비용을 줄여준다.

 

동기(synchronous) 방식으로 동작하기 때문에 메인 스레드 연산을 중단시키기 때문에 조심해야 한다.

 

비동기(asynchronous) 방식의 스토리지 : 캐시 스토리지 API, IndexedDB -> 추가 예정

 

객체를 저장하는 경우 문자형으로 변환을 하여 저장하기 때문에 JSON 형태로 데이터를 읽고 쓸 필요가 있다.

쓸 데이터를 JSON형태로 직렬화하고 읽은 데이터를 역직렬화 하면 원본의 데이터를 그대로 얻을 수 있다.

배열형 데이터를 저장할 때도 동일한 방법을 사용할 수 있다.

window.localStoarage.setItem('key', JSON.stringify({key1: 1, key2: 2})
JSON.parse(localStorage.getItem('key'))

 

Web Storage의 종류

Local Storage 

- 브라우저를 닫았다가 다시 열어도 계속 유지된다.

- 브라우저의 사생활 보호 모드 중 생성한 Local Storage는 마지막 탭이 닫힐 때 지워진다.

- 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.

- 도메인마다 별도로 LocalStorage가 생성된다.

window.localStorage.setItem('key', 'value');
window.localStorage.getItem('key');
window.localStorage.removeItem('key');
window.localStorage.clear();

Session Storage

- 브라우저가 열려있는 한 새로고침과 페이지 복구를 해도 데이터가 남아있다.

- 새로운 탭이나 창에서 열면 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성한다.

- 같은 url의 다수의 탭/창에서 열면 각각의 탭/창에 새로운 Session Storage를 생성한다.

- 탭/창을 닫으면 세션이 끝나고 Session Storage안의 객체를 초기화 시킨다.

window.localStorage.setItem('key', 'value');
window.localStorage.getItem('key');
window.localStorage.removeItem('key');
window.localStorage.clear();