쿠키, 웹 스토리지(로컬 스토리지, 세션 스토리지) 생성 배경
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 객체 사용
쿠키, 로컬 스토리지, 세션 스토리지 사용처
쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성
로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
자동 로그인
세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
일회성 로그인, 입력 폼 저장, 비로그인 장바구니
