쿠키, 로컬 스토리지, 세션 스토리지

SMALL

쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지) 왜 필요한가?

HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 띄어 클라이언트의 상태를 보존하지 않습니다.

이러한 이유 때문에 클라이언트의 상태를 서버가 아닌 클라이언트 측에 저장하여 필요할 때마다 데이터를 꺼내어 서버에 전달하는 방식으로 HTTP의 무상태성의 단점을 보완하고자 쿠키와 웹 스토리지를 사용합니다.

기본적으로 HTTP protocol 환경은 Connectionless(비연결지향) 그리고 Stateless(무상태) 특성을 가지기 때문에 단순한 요청만으로 서버는 클라이언트를 구별할 수가 없습니다.

Connectionless(비연결지향)

HTTP는 먼저 클라이언트 측에서 서버에 요청을 보냅니다. 그러면 서버는 클라이언트가 요청에 대해 응답을 보내고 TCP / IP 연결을 끊는 특성입니다.

HTTP 1.1에서는 Header에 keep-alive라는 값을 줘서 Connection을 재활용합니다.

무상태(stateless)

연결을 끊는 순간 클라이언트와 서버의 통신이 종료되며 상태 정보를 유지하지 않는 특성입니다.

이러한 HTTP 프로토콜의 한계를 보완하기 위하여 우리는 쿠키 또는 세션을 사용해 줍니다.

쿠키란?

만료 기간이 있는 클라이언트(브라우저) 측에 저장하는 Key와 같이 들어있는 작은 텍스트 파일을 의미합니다.
오직 요청과 응답만 존재하였던 HTTP에서 클라이언트가 과거에 서버와 주고받은 내역을 기억하고 불러올 수 있는 역할을 수행합니다.

쿠키는 클라이언트의 상태 정보를 로컬에 저장하였다가 필요시 참조합니다.
클라이언트 1개에게 300개의 쿠키까지 저장이 가능하며, 하나의 도메인당 20개의 값만 가질 수 있으며, 쿠키 하나의 값은 4KB까지만 저장이 가능합니다.

쿠키는 개발자 도구를 열면 Response Header에 Set-Cookie 속성을 사용하면 클라이언트 측에 쿠키를 만들 수 있습니다.
그렇다고 해서 사용자가 직접 쿠키를 가지고 요청하는 것은 당연히 아닙니다.
쿠키는 똑똑하게도 사용자가 따로 요청하지 않아도 자동으로 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버로 전송합니다.!

쿠키의 종류

Session Cookie : 메모리에만 저장되며, 만료시간이 있지만 브라우저 종료 시 삭제되는 쿠키
Persistent Cookie : 파일로 저장되며, Max-Age 설정을 통해 장기간 유지가 가능하며, 브라우저 종료와 관계없이 사용 가능한 쿠키
Secure Cookie : HTTPS에서 사용되는 암호화된 쿠키, 비교적 안전하지만 실질적 보안이 제공되지 않아 민감한 데이터는 저장을 금지하는 쿠키
Thrid Party Cookie : 다른 도메인에 요청이 필요할 때 생성하는 쿠키, 주로 광고 목적으로 사용되며, 유저 개인정보 악용의 문제가 발생하는 쿠키

쿠키의 동작원리

클라이언트가 서버에 HTTP 요청합니다.
서버가 HTTP 응답 시 set-cookie를 통해 쿠키를 생성하여 전달합니다.
클라이언트는 매번 HTTP Request 시 HTTP Header에 쿠키를 담아서 전송합니다.
만약 쿠키의 만료 기간 전이라면, 쿠키는 브라우저에 저장되어 있으므로, 항상 요청 시 사용 가능
만약 쿠키가 만료되었다면, 클라이언트가 새로 서버에 요청하여 새로운 쿠키를 발급합니다.

쿠키의 특징

장점

대부분의 브라우저가 지원합니다.
데이터 유효기간을 지정 할 수 있습니다. (1 hour, 1 day)
XSS(사이트간 악성 스크립트를 심는 행위)로부터 안전합니다.
- 서버에서 쿠키의 HttpOnly 옵션을 설정해주면, JS에서 쿠키에 접근 자체가 불가능 합니다.

단점

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

웹 스토리지란?

클라이언트 측에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
로컬 스토리지와 세션 스토리지 2가지가 존재합니다.
key와 value 쌍으로 이루어져 있는 형태로 데이터가 저장됩니다.
javascript의 window 객체의 property로 존재합니다.

웹 스토리지 특징

장점

서버에 불필요하게 데이터를 저장하지 않아도 됩니다.
쿠키와 다르게 넉넉한 데이터 저장 용량 (Mobile : 2.5MB, DeskTop : 5 ~ 10 MB)
문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체를 저장 가능 합니다.
도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF 공격으로부터 안전합니다.

단점

HTML5를 지원하는 브라우저만 사용이 가능합니다.
XSS로 부터 위험합니다
- LocalStorage에 접근하는 JS코드로 쉽게 접근이 가능합니다.

로컬 스토리지와 세션 스토리지의 차이점

로컬 스토리지는 데이터의 영구 저장이 가능합니다.
반면에, 세션 스토리지는 브라우저 탭/ 윈도우가 닫히면 스토리지가 초기화됩니다.

Javascript 진영에서
로컬 스토리지는 window.localStorage
세션 스토리지는 window.sessionStorage
객체를 사용합니다.