HTTP 프로토콜의 한계
기본적으로 HTTP는 비연결지향(connectionless), 무상태(stateless) 특성을 가지고 있다.
즉, 서버는 클라이언트를 구별할 수 없음
- 비연결성지향(connectionless)
HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성
HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다.- 무상태(stateless)
연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성
웹 서비스에서 상태관리의 중요성
1. 사용자 인증과 세션 관리
- 로그인 상태 유지
- 사용자별 개인화된 서비스
- 보안 토큰 및 권한관리
2. 사용자 경험 (UX) 향상
- 장바구니, 사용자설정(테마, 언어), 최근 본 상품 목록 등 정보 저장
3. 서비스 연속성 보장
- 페이지 이동 시, 작업 상태 유지
- Multi Step(ex. 주문/결제 과정)
위와 같은 요구사항을 충족 시키기 위해 WebStorage, cookie를 사용함
Cookie
클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일
클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 50개의 값만 가질 수 있으며, 하나의 쿠키값은 4KB까지 저장이 가능하다.
-
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있음
-> ex. 광고 7일간 보지 않기 -
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버에 전송한다.
쿠키 설정
Secure : 이 플래그가 설정된 쿠키는 HTTPS 연결을 통해서만 전송 됨 즉, 데이터가 암호화되어 전송되기 때문에 네트워크를 통한 공격으로부터 보호할 수 있음 (Man-in-the-Middle Attack)
HttpOnly : 이 플래그가 설정된 쿠키는 웹 서버에 의해서만 액세스 될 수 있고, 클라이언트 측 스크립트(자바스크립트) 에서는 접근 할 수 없다. 이는 크로스 사이트 스크립팅(XSS) 공격으로부터 쿠키를 보호하는데 도움이 됨
SameSite : 크로스 사이트 요청과 함께 쿠키를 보내는 방법을 결정
- Strict: 가장 엄격한 설정으로, 같은 도메인의 요청에만 쿠키 전송
- Lax: 기본값으로, GET 요청과 같은 안전한 HTTP 메서드로의 이동은 허용
- None: 모든 크로스 사이트 요청에 쿠키 전송 (Secure 플래그 필수)
쿠키의 동작 방식
1. 쿠키 생성:
- 서버에서 생성: Set-Cookie 헤더를 통해 생성
- 클라이언트에서 생성: document.cookie를 통해 JavaScript로 생성 가능
- 쿠키 저장:
- 생성된 쿠키는 브라우저에 저장
- 만료기간(Expires) 또는 지속시간(Max-Age) 설정에 따라 저장 기간 결정
- 만료기간이 없으면 세션 쿠키로 브라우저 종료 시 삭제
- 쿠키 전송:
- 클라이언트가 요청을 보낼 때 자동으로 Cookie 헤더에 포함
- 설정된 도메인, 경로, SameSite 설정에 부합하는 경우에만 전송
- HTTPS only 설정된 경우 HTTPS 통신에서만 전송
- 쿠키 갱신:
- 서버에서 갱신: 동일한 이름의 Set-Cookie 헤더로 새로운 값 전송
- 클라이언트에서 갱신: JavaScript로 같은 키의 새로운 값 설정
- 쿠키 삭제:
- 만료기간을 과거로 설정
- Max-Age를 0 또는 음수로 설정
쿠키의 사용 예
방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
O일간 광고를 보지 않겠습니까?
웹 스토리지(Web Storage)
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소
간단한 Key-Value 스토리지 형태
쿠키와 달리 자동 전송의 위험성이 없음
오리진(Origin) 단위로 접근이 제한되는 특성 덕분에 CSRF로 부터 안전
쿠키보다 큰 저쟝 용량 지원(일반적으로 5~10MB 정도)
서버가 HTTP 헤더를 통해 데이터를 조작할 수 없음(웹 스토리지 객체 조작은 JavaScript 내에서만 수행)
문자형(string) 데이터 타입만 지원(JSON 타입 가능)
로컬 스토리지(localStorage)
사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성)
단, 동일한 브라우저를 사용할 때만 해당 (오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.)
localstorage 사용 예
- 사용자 설정/선호도 저장 (다크모드, 언어 설정 등)
- 장바구니 데이터
- 자동 로그인을 위한 인증 토큰 (refreshToken)
- 캐시된 API 응답 데이터
- 작성 중인 게시글 임시 저장
세션 스토리지(sessionStorage)
데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거
일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)
Sessionstorage 사용 예
- 일회성 로그인 정보
- 결제 프로세스 진행 상태
- 입력 폼 임시 저장
- 뒤로가기 시 이전 스크롤 위치
- 탭별 독립적인 상태 관리
요약
공통점: Cookie와 Web Storage는 클라이언트 측 데이터 저장소
차이점:
- 데이터 전송 방식: Cookie는 모든 HTTP 요청에 자동으로 포함되어 서버로 전송되지만, Web Storage는 자동 전송되지 않고 JavaScript를 통해서만 접근이 가능
- 저장 용량: Cookie는 도메인당 50개까지, 각각 4KB로 제한되는 반면, Web Storage는 보통 5~10MB까지 저장할 수 있어 더 큰 데이터를 다룰 수 있음
- 데이터의 영속성: Cookie는 만료기간을 설정할 수 있고, Web Storage는 localStorage의 경우 명시적으로 삭제하기 전까지 영구 보관되며, sessionStorage는 탭을 닫을 때 자동으로 삭제됨
