1. Cookie와 Web Storage의 생성

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

클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키와 웹 스토리지를 사용한다.

---

2. Cookie란?

만료 기간이 있는 클라이언트 단에서 저장하는 작은 텍스트 파일이다.

요청과 응답만이 존재했던 HTTP 웹에서 이전에 서버와 클라이언트가 주고 받은 내역을 기억하고 불러올 수 있는 역할을 수행하고 있다.

• 일시적으로 필요한 가벼운 데이터 저장이 필요한 경우 사용한다.

  • 다시 보지 않음 팝업창, 로그인 자동 완성 등에 사용

2-1. Cookie 종류

• Session Cookie

  • 메모리에만 저장되며, 만료 시간이 있지만 브라우저 종료 시 삭제되는 쿠키이다.

• Persistent Cookie

  • 파일로 저장되며, Max-Age 설정을 통해 자기간 유지가 가능하고, 브라우저 종료와 관계없이 사용이 가능한 쿠키이다.

• Secure Cookie

  • HTTPS에서 사용되는 암호화된 쿠키로, 비교적 안전하지만 실질적 보안이 제공되지 않기 때문에 민감한 데이터 저장에는 위험한 쿠키이다.

• Third Party Cookie

  • 다른 도메인에 요청이 필요할 때 생성하는 쿠키로, 주로 광고 목적으로 사용되며, 유저 개인정보 악용의 문제가 발생할 수 있는 쿠키이다.

2-2. Cookie 동작 원리

1. 클라이언트가 서버에 HTTP를 요청한다.

2. 서버가 HTTP 응답시, set-cookie를 통해 쿠키를 생성하여 전달한다.

3. 클라이언트는 이때부터 매 HTTP Request시에 HTTP Header에 쿠키를 담아서 전송한다.

4. 만료 기간 전이라면, 쿠키는 브라우저에 저장되어 있으며, 항상 요청 시에 사용이 가능하다.

5. 만료되었다면, 클라이언트가 새로 서버에 요청하여 쿠키를 새로 발급받아야 한다.

2-3. Cookie의 특징

2-3-1. 장점

• 대부분의 브라우저에서 지원한다.

• 데이터 유효기간을 지정할 수 있다. (1시간, 1일 등)

• XSS(사이트 간에 악성 JavaScript 코드를 심는 행위)로부터 안전하며, 서버에서 쿠키의 httpOnly 옵션을 설정하여 JavaScript에서 쿠키에 접근 자체를 막을 수 있다.

2-3-2. 단점

• 저장 용량이 매우 작다. (4kb)

• 매번 서버에 HTTP 요청시에 같이 전달되어 서버에 부담을 줄 수 있다.

• 암호화가 안되어 있어서 유저 정보의 도난 위험이 있다.

• CSRF(사이트 간 요청 위조)의 위협에 취약하다.

  CSRF(사이트 간 요청 위조)란?

  공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당하게 이익을 취하는 행위

• 문자열 데이터만 저장이 가능하다.

---

3. Web Storage란?

클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소이다.

Local Storage와 Session Storage 두 가지의 방식이 존재하며, key와 value 1쌍의 형태로 데이터를 저장한다.

또한 window 객체의 프로퍼티로써 존재한다.

3-1. Local Storage VS Session Storage

3-1-1. Local Storage

Local Storage는 사용자의 로컬 환경에 데이터를 저장하는 방식으로, 영구적인 저장이 가능하다.

• 지속적으로 필요한 데이터 저장이 필요한 경우에 사용한다.

  • 자동 로그인 등에 사용

3-1-2. Session Storage

Session Storage는 브라우저 탭/윈도우 자체에 데이터를 저장하는 방식으로, 브라우저 탭/윈도우가 닫힐 경우, 스토리지가 초기화된다.

• 일시적으로 필요한 데이터 저장이 필요한 경우 사용한다.

  • 일회성 로그인, 입력 폼 저장, 비로그인 장바구니 등에 사용

3-2. Web Storage의 특징

3-2-1. 장점

• 서버에 불필요하게 데이터 저장하지 않는다.

• 데이터의 저장 용량이 Cookie비해 크다

  모바일 : 2.5MB
  데스크탑 : 5~10MB

• 문자열 외에도 JavaScript의 모든 원시형 데이터와 객체형 데이터를 저장할 수 있다.

• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전하다.

3-2-2. 단점

• HTML5를 지원하는 브라우저만 사용이 가능하다.

• Local Storage에 접근하는 JavaScript 코드로 쉽게 접근 가능하며, XSS로부터 취약하다.

---

참고 사이트

hs.log - 쿠키, 로컬 스토리지, 세션 스토리지
Login Radius Blog - Local Storage vs. Session Storage vs. Cookies