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

쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지) 생성 배경

• HTTP는 요청과 응답으로 이뤄지는 하나의 사이클이 끝나면, 연결이 끊어지는 무상태성을 띄어서 클라이언트의 상태를 보존하지 않는다
• 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요시마다 데이터를 꺼내서 서버에 전달하는 방식으로 HTTP의 단점을 보완하고자 쿠키와 웹 스토리지를 사용한다

쿠키란?

• 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일
• 요청과 응답만이 존재했던 HTTP 웹세계에 이전에 서버와 클라이언트가 주고 받은 내역을 기억하고 불러올 수 있는 혁신적인 역할을 수행

쿠키 종류

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

쿠키 동작 원리

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

쿠키 특징

장점

• 대부분의 브라우저가 지원
• 데이터 유효기간 지정 가능 (ex. 1 hour, 1 day)
• XSS (사이트 간 악성 Js 코드를 심는 행위)로부터 안전 - 서버에서 쿠키의 httpOnly 옵션을 설정하면, Js에서 쿠키에 접근 자체가 불가능
  단점
• 매우 작은 데이터 저장 용량 (4kb)
• 매번 서버에 HTTP 요청시 같이 전달되어 서버에 부담
• 암호화가 안되어 있어 유저 정보 도난 위험
• CSRF(사이트 간 요청 위조) 위협 - 공격자가 사용자의 요청을 가로챈 뒤 사용자의 의지와 상관없이 보안적으로 위험한 행동을 하게끔 변조하여 부당 이익을 취하는 행위
• 문자열만 저장 가능

웹 스토리지란?

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
• 로컬 스토리지와 세션 스토리지가 존재
• key와 value 쌍의 형태로 데이터 저장
• window 객체의 프로퍼티로 존재

웹 스토리지 특징

장점

• 서버에 불필요하게 데이터 저장 x
• 넉넉한 데이터 저장 용량 (모바일: 2.5MB, 데스크탑: 5~10MB)
• 문자열 외에도 자바스크립트의 모든 원시형 데이터와 객체 저장 가능
• 도메인 단위로 접근이 제한되는 CORS 특성 덕분에 CSRF로부터 안전
  단점
• HTML5를 지원하는 브라우저만 사용 가능
• XSS로부터 위험 - local storage에 접근하는 Js 코드로 쉽게 접근 가능

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

• 로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
• 로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체 사용

쿠키, 로컬 스토리지, 세션 스토리지 사용처

• 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
  • 다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성
• 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
  • 자동 로그인
• 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
  • 일회성 로그인, 입력 폼 저장, 비로그인 장바구니