[개발지식] 브라우저 저장소, 각각에 대해서 자세히 알고 계신가요?

브라우저 저장소 로컬, 세션, 쿠키가 있는 건 알고 있는데..
각각 무엇을 하고 장점과 단점은 뭐였죠?

 

브라우저 저장소

브라우저 저장소

(크롬 기준) 우리가 브라우저에서 개발자 도구 탭을 열면 애플리케이션 탭에서 브라우저 저장소에 대한 정보를 볼 수 있습니다.

로컬 스토리지, 세션 스토리지, IndexedDB, 웹 SQL, 쿠키, 신뢰 토큰(크롬 한정) 이렇게 나누어져 있어요.

오늘은 이것들에(신뢰 토큰 제외) 대해서 자세히 알아볼 예정입니다.

 

쿠키

"쿠키"라는 용어는 웹 브라우저 프로그래머 루 몬툴리가 만들어냈다고 합니다.

이는 유닉스 프로그래머들이 사용한, "프로그램이 수신 후 변경하지 않은 채로 반환하는 데이터의 패킷"을 의미하는 매직 쿠키라는 용어에서 비롯된 것이라고 합니다.

 

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.

 

쿠키를 설정하는 방식은 HTTP 요청을 수신할 때, 서버에서 응답과 함께 Set-Cookie 헤더를 전송하면 됩니다.

그러면 클라이언트는 브라우저에 쿠키가 저장이 되고, 그 후 쿠키는 같은 서버에 만들어진 요청들의 Cookie HTTP 헤더 안에 계속 포함되어서 전송됩니다. 만료일 혹은 지속시간(duration)도 명시될 수 있고, 만료된 쿠키는 더 이상 보내지지 않습니다. 추가적으로, 특정 도메인 혹은 경로 제한을 설정할 수 있으며 이는 쿠키가 보내지는 것을 제한할 수 있습니다.

 

현재의 웹 스토리지가 없을 때 현재의 쿠키의 용도는 다양했습니다.

서버에 저장해야 할 로그인, 장바구니, 게임 스코어와 같은 정보 또는 다크 모드와 같은 테마 설정 또는 사용자들의 웹에서 행동들을 추적하고 분석하는 용도로도 사용되었습니다. 그런데 모든 요청마다 쿠키가 함께 전송이 되기 때문에 애플리케이션의 성능이 떨어지는 원인이 될 수 있습니다.

 

쿠키의 사양

• 4,096바이트 크기의 쿠키를 지원할 것
• 한 도메인 당 최소 50개 쿠키를 지원할 것(예: 각 웹사이트 당)
• 총 최소 3,000개 쿠키를 지원할 것.

쿠키에는 제한이 있습니다.

크기 제한, 개수 제한이 있죠 그래서 범용성 있게 사용하기에는 조금 한계가 있었습니다.

 

웹 스토리지

W3C 웹 브라우저 표준에 브라우저 웹 스토리지는 이렇게 설명되어 있습니다.

웹 스토리지를 사용하면 데이터를 유저의 로컬 브라우저에 저장할 수 있습니다.
HTML5에서는 데이터들을 쿠키에 저장했습니다. 근데 쿠키는 모든 서버 요청에 포함이 됩니다.
웹 스토리지는 조금 더 보안이 좋고, 많은 양의 데이터를 로컬에 웹 사이트의 성능에 상관없이 저장할 수 있습니다.
쿠키와 달리, 웹 스토리지는 5MB의 데이터를 저장할 수 있습니다. 그리고 웹 스토리지는 서버에 절대 전달이 되지 않습니다.
웹 스토리지는 같은 Origin(domain, protocol, port) 일 때는 전역으로 접근이 가능합니다.

 

웹 스토리지에 대한 설명만 봐도 쿠키보다 최근에 나온 것이고, 쿠키의 단점을 보완해서 나왔다는 것을 알 수 있습니다.

웹 스토리지의 특징에는 몇 가지가 있습니다.

 

1. 데이터를 절대 서버로 전송하지 않습니다.

쿠키는 이와 반대로 서버에 전송하게 되어있습니다. 그래서 성능이 안 좋아지는 원인이 될 수 있지만, 웹 스토리지는 오직 클라이언트 쪽에서만 주고받습니다.

 

2. 저장 공간이 쿠키보다 큽니다. (최대 5MB)

하나의 쿠키는 약 4KB로 제한되어 있지만, 웹 스토리지는 최대 5MB까지 지원합니다. 

 

웹 스토리지에는 두 가지 방식이 있습니다. 바로 sessionStorage와 localStroage입니다.

두 가지 방식의 가장 큰 차이점은 지속성에 있습니다.

LocalStorage (로컬 스토리지)

로컬 스토리지는 유저의 편의성을 증대시켜주는 테마(다크 모드) 설정이나, 로그인 정보와 같은 정보들을 저장할 수 있습니다.

그리고 해당 데이터들은 브라우저를 종료해도 유지가 됩니다. 그래서 명시적으로 삭제해주지 않으면 로컬 스토리지의 데이터는 끝까지 남아있습니다. 

SessionStroage (세션 스토리지)

세션 스토리지는 로컬 스토리지와 달리 브라우저를 종료하면 같이 삭제됩니다. 브라우저 세션에 한정해서 존재하게 되는 거죠.

 

서버와 통신하는 쿠키와 달리 웹 스토리지는 오직 브라우저에만 존재하고, 브라우저에서만 이용됩니다.

IndexedDB

쿠키와 웹 스토리지에 비해서 많이 언급이 안 되는 IndexedDB에 대해서 간단히 알아보겠습니다.

 

IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나입니다. IndexedDB를 사용하여 네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용할 수 있는 웹 애플리케이션을 만들 수 있기 때문에, 여러분의 웹 애플리케이션은 온라인과 오프라인 환경에서 모두 동작할 수 있습니다. 

 

Indexed Database API 또는 IndexedDB (과거 이름: WebSimpleDB)는 색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스를 위해 W3C 가 권고한 웹 브라우저 표준 인터페이스의 하나입니다.

웹 SQL

그리고 맨 위에 사진에서 보이는 웹 SQL도 비슷한 친구인데

W3C에서 2010 11월 8일에 WebSQL을 deprecated(더 이상 사용되지 않는) 처리했습니다.

 

마무리

로그인 정보를 유지하기 위해 세션과 쿠키를 이용해 서버에서 로그인 정보를 관리할 수도 있고

혹은 서버가 하는 일을 줄이고 싶다면 로그인 정보 관리에 대한 책임을 브라우저에게 넘겨서 관리를 할 수 도 있습니다.

(JWT을 이용하여 액세스 토큰, 리프레시 토큰을 나누어 관리)

각각의 방법에는 각각의 보안 취약점이 존재합니다.(CSRF, XSS와 같은 공격들)

 

자신의 프로젝트에 맞는 저장소와 보안을 사용하는 것은 개발자의 몫입니다.

각각의 용도에 맞게 잘 사용하는 것 또한 개발자의 몫이며, 서로의 장단점을 잘 파악해 적용해야 합니다.

 

간단히 위의 내용들에 대해서 그림으로 요약을 해봤습니다.

 

참고

• HTTP 쿠키 - 위키디피아
• HTTP 쿠키 - MDN Web Docs
• Web Storage API - MDN Web Docs
• IndexedDB 사용하기 - MDN Web Docs