🤠 Web Storage

Web Storage

Web Storage는 HTML5에서 추가된 간단한 키와 값을 저장(key-value storage) 할 수 있는 저장소이다. 데이터의 지속성에 따라 영구저장소(LocalStorage)와 임시저장소(SessionStorage) 두가지를 지원한다. 그 동안 많이 사용해 왔던 쿠키와 거의 차이가 없어 보이지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입이 되었다.

Web Storage 특징

Web Storage는 다음과 같은 특징이 있다.

• 키와 값은 무조건 문자열로 변환되어 저장된다. (객체를 읽고 쓰려면 JSON.stringify, JSON.parse를 사용)
• 브라우저별 용량제한이 다르다. (용량 제한은 대략 5MB)
• 도메인별 Storage는 다르며 도메인별로 용량 제한이 있다. (Protocal, host, port가 같으면 같은 스토리지를 공유)
• 이것 마저 용량이 부족하다면 indexedDB가 있다.

(indexedDB에 대해서는 다음에 좀더 자세히 알아보도록 하고,,)

localStorage와 sessionStorage

Web Storage는 데이터의 지속성에 따라 두 가지 용도의 저장소를 제공한다.

LocalStorage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다. 앞서 말한 것처럼 도메인별로 스토리지가 생성이 되고 Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

SessionStorage

SessionStorage는 데이터가 지속적으로 보관이 되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다. 쉽게 말하자면, 탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다는 의미이다. 이는 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분 되는 가장 큰 특징이다.

Cookie

• 후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다. 만료는 유형에 따라 다르며 만료 기간은 서버 측 또는 클라이언트 측 (일반적으로 서버 측)에서 설정할 수 있다.
• 쿠키는 주로 서버 측에서 읽기(클라이언트 측에서 읽을 수도 있음) 위한 것이며, Local Storage 및 Session Storage는 클라이언트 측에서만 읽을 수 있다.
• 크기는 4KB보다 작아야 한다.
• 해당 쿠키에 대해 httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들 수 있다. 이렇게하면 쿠키에 대한 클라이언트 측 액세스가 차단된다.

각 저장소별로 데이터가 어떻게 저장되고 있는지를 보고 싶다면 디버깅모드(F12) > Application에서 확인 할 수 있다.

마치며...

WebStorage의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 클라이언트, 즉 사용자를 막고 있지는 않다. 클라이언트는 얼마든지 저장된 값을 임의로 수정이 가능하다. 이것은 쿠키와 동일한 개념이다. 그렇다고 쿠키에 비해 별다른 보안 취약점을 더 가진 것은 아니다. 따라서 개발자는 사용자에 의한 이러한 임의 변경에 항상 예의 주시하고 방어 코드의 작성을 잊지 말아야 한다.