브라우저 저장소(Web Storage) - 쿠키, 세션스토리지, 로컬스토리지

브라우저 저장소는 왜 생겼을까?

이 질문에 대한 답을 하려면 우선 HTTP의 특성에 대해 알고 있어야 한다.

아래 포스팅에 정리해두었으니 먼저 읽고 오시길!

 

https://syrup-log.tistory.com/entry/HTTP%EB%9E%80

HTTP란?

 

 

---

 

웹사이트의 개인화

웹이 발전함에 따라 각 클라이언트에 맞게 개인화된 웹 사이트를 제공하고자 하는 욕구가 발생했다. 개인화를 위해서 여러 클라이언트들을 서버가 식별할 수 있어야 했다. HTTP는 Connectionless, Stateless였으므로 클라이언트를 식별할 수가 없었고, 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키를 개발하게 되었다.

---

쿠키(Cookie)

쿠키는 왜 쿠키일까?

쿠키라는 이름은 유닉스 프로그래머들이 값을 변경하지 않고 주고 받는 데이터 패킷의 이름인 "Magic Cookie"에서 유래했다. 매직 쿠키는 격언이나 운세가 적힌 쪽지가 속에 들어있는 과자인 포춘 쿠키에서 나온 이름이라고 한다. 단어, 메시지, 정보가 들어있는 작은 조각이 HTTP 쿠키라고 생각하면 될 것 같다.

 

쿠키는 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일이다. 쿠키는 클라이언트 측에서 로컬 웹 브라우저가 저장하는 데이터다. 인증을 하는 과정에서 처음에 서버는 쿠키를 생성해서 클라이언트에게 보내게된다면, 클라이언트는 쿠키를 웹 브라우저에 Key-Value 형식으로 저장이 된다. 쿠키의 유효기간은 서버에서 설정하여 보낼수 있다. 유효기간이 지나면 쿠키는 자동으로 소멸된다. 만약 유효기간을 설정하지 않는다면 웹 브라우저를 종료하는 순간 사라진다. 민감한 정보를 그대로 HTTP 통신에 노출하는 경우 탈취당할 수 있다. 아이디와 패스워드를 쿠키에 넣어서 모든 요청마다 인증 정보를 포함하게 할 수 있는데, 통신 과정에서 패킷을 가로채가면 패스워드가 유출될 수 있다. 이러한 쿠키의 보안 취약점을 보완하기 위해 "세션"이 등장한다.

 

장점

• 대부분의 브라우저가 지원
• 데이터 유효기간 지정 가능 (ex. 1 hour, 1 day)
• XSS (사이트 간 악성 Js 코드를 심는 행위)로부터 안전 - 서버에서 쿠키의 httpOnly 옵션을 설정하면, Js에서 쿠키에 접근 자체가 불가능

단점

• 매우 작은 데이터 저장 용량 (4kb)
• 매번 서버에 HTTP 요청시 같이 전달되어 서버에 부담
• 암호화가 안되어 있어 유저 정보 도난 위험
• CSRF(사이트 간 요청 위조) 위협 - 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
• 문자열만 저장 가능

 

세션(Session)

쿠키가 탈취당할 수 있다는 것을 인지하여, 민감한 정보는 서버에만 저장하고 쿠키에는 서버에 저장된 정보를 찾을 수 있는 키만 전달하는 방식. 쿠키를 사용하는 것에는 변함이 없고, 쿠키 값으로 어떤 것을 주느냐가 다르다.

• 사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
• 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
• 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.
• 저장위치 때문에 쿠키는 스니핑에 당할 우려가 있지만, 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기때문에 보안성은 쿠키<세션

세션의 한계

• 데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.
• 쿠키에 담긴 정보가 있는 그대로는 의미 없지만, 탈취한 쿠키를 이용해 서버에 요청을 보내면 정보가 유출될 수 있다. (세션 하이재킹)
• 쿠키로부터 받은 세션 ID로 세션 스토리지를 탐색해야 하는 시간이 든다.

 

웹 스토리지(Web Storage)

웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 등장하였으며, 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 한다.

 

장점

• 서버에 불필요하게 데이터 저장 x
• 넉넉한 데이터 저장 용량 (모바일: 2.5MB, 데스크탑: 5~10MB)
• 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전

단점

• HTML5를 지원하는 브라우저만 사용 가능
• XSS로부터 위험 - local storage에 접근하는 Js 코드로 쉽게 접근 가능

 

Web Storage와 cookie의 차이점

• 쿠키는 매번 서버로 전송된다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

• 영구 데이터 저장이 가능하다

쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 된다. 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다. WebStorage는 만료기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재하는 것이다.

 

 

로컬 스토리지(Local Storage)

• 사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성)
• 단, 동일한 브라우저를 사용할 때만 해당 
• 지속적으로 필요한 데이터 저장 (ex. 자동 로그인 등)

 

세션 스토리지(Session Storage)

• 데이터가 브라우저 탭에 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거
• 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 일회성 로그인, 비회원 장바구니, 입력폼 저장 등)

 

어떤 데이터를 어디에 저장하면 좋을까?

쿠키

• 사이트 환경설정을 기억하는 용도로 사용 → 팝업창에서 "오늘 하루동안 보지 않기", "일주일동안 보지 않기"같은 환경설정 기능 (기간 설정을 할 수 있기 때문에)

로컬 스토리지

• 지속적으로 필요한 데이터 저장 (자동 로그인 등)

세션 스토리지

• 일시적으로 필요한 데이터 저장 (일회성 로그인 정보, 입력폼 저장, 비회원 장바구니 등)