웹 애플리케이션의 데이터 저장 방식
웹 애플리케이션을 개발할 때, 데이터를 저장하고 관리하는 것은 필수적인 요소입니다. 사용자의 로그인 상태를 유지, 페이지 방문 기록 저장, 사용자 환경을 맞춤 설정하는 등의 기능을 위해 클라이언트 측과 서버 측에서 다양한 방식으로 데이터를 저장합니다.
대표적인 데이터 저장 방식으로 쿠키(Cookie), 세션(Session), 웹 스토리지(Web Storage) 가 있으며 각각의 방식은 저장 위치, 데이터 보존 기간, 보안 수준, 사용 목적에 따라 차이가 있습니다.
먼저 HTTP에 대해 간단히 알아본 후 각 저장방식에 대해 하나씩 알아보고 차이점을 비교해 보겠습니다.
HTTP
HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받기 위한 프로토콜입니다. 클라이언트(웹 브라우저)와 서버가 통신할 때 HTTP를 사용하며, 대표적인 특징은 비연결성(stateless)과 무상태성(connectionless)입니다.HTTP의 특징
비연결성(Connectionless):
요청(Request)을 보낸 후 응답(Response)을 받으면 연결을 끊고 새로운 요청이 있으면 다시 연결을 맺습니다.무상태성(Stateless): 서버는 클라이언트의 이전 요청을 기억하지 않습니다. 그렇기 때문에 웹 서버 입장에서 매 요청이 어떤 웹 브라우저가 보낸 것인지 알 수 없습니다. 클라이언트와 서버 관계에서 서버가 클라이언트 상태를 보존하지 않는 것을 의미합니다.
Stateful (상태유지, 연속성)
클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존합니다.
일반적으로 브라우저의 쿠키 또는 서버의 세션에 저장되어 상태를 유지합니다.
이러한 특징 때문에 웹 애플리케이션에서는 사용자의 로그인 상태나 장바구니 정보 등을 유지하려면 추가적인 방법이 필요합니다. 이를 해결하기 위해 등장한 것이
쿠키(Cookie), 세션(Session), 웹 스토리지(Web Storage)입니다.쿠키(Cookie)
쿠키는 웹 서버가 사용자의 브라우저에 전송(저장)하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각을 저장해 두었다가 동일한 서버에서 재요청이 온다면 저장된 데이터를 함께 전송합니다. 이를 사용하면
Stateless 성향을 가진 HTTP 프로토콜에서도 서버와 클라이언트 간의 연결이 유지될 수 있습니다.쿠키의 사용 목적
쿠키는 클라이언트 측에 정보를 저장하는 용도로 많이 사용되었습니다. 하지만 최근에는
modern storage API를 사용해 정보를 저장하는 것을 권장하고 있습니다. 모든 요청에 쿠키가 함께 전송되기 때문에 성능 저하의 원인이 될수도 있기 때문입니다.쿠키는 주로 아래 3가지 목적을 위해 사용한다.
- 세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 개인화(Personalization) : 웹사이트에 대한 사용자 선호, 테마 등의 세팅
- 트래킹(Tracking) : 사용자 행동을 기록하고 분석하는 용도
쿠키의 전송 기준
웹 브라우저가 쿠리를 서버에 전송할지 여부는 쿠키에 설정된 도메인(Domain)과 경로(Path)에 따라 결정됩니다. 모든 쿠키는 특정 도메인과 경로에 연결되어 있으며 요청하는 URL의 도메인과 경로가 설정값과 일치하거나 해당 경로 하위에 있는 경우만 쿠키가 전송됩니다.
도메인과 경로 설정
- h1 = w1 (Domain:
a.com, Path:/)
- h2 = w2 (Domain:
a.com, Path:/user)
- h3 = w3 (Domain:
b.com, Path:/hello)
- h4 = w4 (Domain:
c.com, Path:/world)
요청에 따른 쿠키 전송
a.com/user/name요청: 1번 쿠키 + 2번 쿠키 전송 (도메인, 경로 모두 일치)
a.com/요청: 1번 쿠키만 전송 (경로 /는 최상위)
b.com/hello요청: 3번 쿠키만 전송 (경로 일치)
c.com/ 요청: 전송되는 쿠키 없음 (경로가/world와 일치하지 않음, 최상위 경로가 설정되지 않음)
Path의 역할
쿠키에 설정된 Path는 해당 경로와 그 하위 경로에 대한 쿠키 전송 여부를 결정합니다. Path에는
*(와일드카드)가 사용되지 않고 /가 최상위 경로를 뜻합니다.예를 들어 Path가
/로 설정된 쿠키는 아래 경로로 모두 전송됩니다.a.com/user
a.com/payment
a.com/product
만약 Path가
/user로 설정된 쿠키는 아래 경로와 아래 경로의 하위 경로에만 전송됩니다.a.com/user/profile
a.com/user/settings
Path는 대소문자를 구분하므로
/User와 /user는 다른 경로로 인식됩니다.쿠키 유효시간
쿠키의 유효시간은 두 가지 속성에 의해 나누어 집니다.
- Persistent Cookie (지속 쿠키) :
MaxAge또는Expires속성이 명시된 쿠키로 지정된 시간까지 유지됩니다. MaxAge: 쿠키와 브라우저에 저장된 후 유지될 시간을 초 단위로 설정Expires: 쿠키가 만료될 날짜와 시간을 지정
- Session Cookie (세션 쿠키) : 유효 시간 속성이 설정되지 않으면 브라우저가 닫힐 때 삭제됩니다.
로그인 세션 : 로그인 후 로그아웃할 때까지의 시간
HTTP 세션 : 클라이언트가 서버로 요청을 보내고 응답을 받을 때까지의 연결
브라우저 세션 : 브라우저 탭 또는 창이 열려 있는 동안 유지되는 기간
쿠키의 보안
쿠키는 주로 로그인 인증이나 개인 식별 정보를 저장하는데 사용되므로 이를 보호하기 위한 보안 설정이 필수적입니다.
쿠키 보안을 위한 주요 옵션은 아래와 같습니다.
HttpOnly
HttpOnly 옵션이 설정된 쿠키는 클라이언트 측 자바스크립트에서 접근할 수 없습니다. 이는 XSS 공격을 통해 쿠키를 탈취하려는 시도를 방지하는데 효과적입니다.XSS는 Cross Site Script의 약자로 공격자가 웹사이트를 넘어서 공격한다는 것으로 웹사이트 입력 또는 출력 부분에 스크립트를 심어 웹사이트 뿐만 아니라 다른 사용자 또는 서버도 공격 가능합니다. 대표적으로 Reflected XSS, Stored XSS, Dom based XSS로 나누어진다.Secure
Secure옵션이 설정된 쿠키는 HTTPS 프로토콜을 사용하는 경우에만 서버로 전송됩니다. 이로 인해서 패킷탈취(MITM) 공격을 방지할 수 있습니다. HTTP로 통신하는 경우에는 전송되지 않으므로 쿠키 탈취 위험을 줄일 수 있습니다.MITM는 Man-in-the-Middle의 약자로 요청과 응답 사이에서 응답 패킷 탈취를 방지합니다.SameSite
SameSite속성은 쿠키가 동일한 사이트에서만 전송되도록 하여 CSRF 공격을 방지합니다. SameSite의 보안 수준은 3가지로 나누어 집니다.SameSite 보안 수준
- 보안 높음 -
Strict: 쿠키가 동일한 사이트 내에서만 전송됩니다. 외부 사이트에서의 모든 요청에 대한 쿠키 전송이 차단되므로 보안성이 가장 높습니다.
- 보안 중간 -
Lax: 기본적으로 서드파티 요청에는 쿠키가 허용되지 않지만 사용자가 링크를 클릭하는 등 GET 요청에 한해 허용됩니다. - 특수 케이스 : GET 요청, <a>, <link rel="prerender">
- 보안 낮음 -
None: 서드파티 쿠키도 전송이 허용되며 다른 도메인 간 쿠키 전송이 가능합니다. 단, Secure 속성이 필수로 설정되어야 합니다.
퍼스트 파티 쿠키와 서드파티 쿠키
퍼스트 파티와 서드 파티 판단은
Site Domain과 Cookie Domain의 일치여부로 결정됩니다.퍼스트 파티 쿠키 : 현재 보고 있는 웹사이트의 도메인에서 설정된 쿠키이다. 사용자가 로그인한 상태를 유지하기 위한 쿠키가 이것에 해당합니다. 도메인이 일치하면 쿠키가 전송됩니다.
서드파티 쿠키 : 현재 사이트와 다른 도메인에서 설정된 쿠키로 주로 광고 추적 및 마케팅 목적으로 사용됩니다. 다른 도메인에서 설정되어 크로스 사이트 요청 시에도 전송될 수 있습니다.
세션(Session)
세션은 서버에서 관리하는 사용자 상태 정보입니다. 사용자가 웹사이트에 접속하면 서버가 고유한 세션 ID를 생성하고 이를 쿠키를 통해 클라이언트에게 전달합니다. 이후 클라이언트는 요청할 때 세션 ID를 포함하여 보내면 서버는 이를 기반으로 사용자 정보를 조회할 수 있습니다.
세션의 특징
- 서버에서 관리되어 클라이언트가 데이터를 직접 보관하지 않고 서버가 보관합니다.
- 사용자가 일정 시간 동안 활동하지 않으면 자동으로 삭제됩니다.
- 중요한 정보를 클라이언트가 직접 보관하지 않기 때문에 비교적 안전합니다.
세션의 사용 목적
세션은 주로 다음과 같은 목적을 위해 사용됩니다.
- 사용자 인증(User Authentication) : 로그인 상태를 유지하고 사용자의 인증 정보를 보호
- 개인화된 사용자 경험(Personalized Experience) : 로그인한 사용자의 설정, 권한, 선호 정보 유지
- 트랜잭션 관리(Transaction Management) : 전자상거래 사이트에서 장바구니 유지, 주문 진행 상태 관리
웹 스토리지(Web Storage)
웹 스토리지는 브라우저에서 데이터를 저장하는 기술로, 쿠키보다 더 많은 데이터를 저장할 수 있으며 서버로 자동 전송되지 않습니다. 대표적으로
로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다.웹 스토리지의 사용 목적
웹 스토리지는 다음과 같은 용도로 사용됩니다.
- 빠른 데이터 접근(Faster Data Access) : 클라이언트에서 직접 데이터에 접근하여 성능 향상
- 상태 유지(State Persistence) : 사용자 설정, UI 상태(예: 다크 모드 여부) 저장
- 데이터 캐싱(Data Caching) : API 응답 결과 등을 저장하여 네트워크 요청 감소
웹 스토리지 특징
- 쿠키는 일반적으로 4KB 정도의 작은 용량만 저장할 수 있지만 웹 스토리지는 5MB 이상의 훨씬 큰 용량을 저장할 수 있습니다.
- 쿠키와 달리 웹 스토리지 데이터는 HTTP 요청에 포함되어 서버로 자동 전송되지 않습니다. 불필요한 네트워크 트래픽을 줄이고 개인 정보 보호에도 도움이 됩니다.
- 웹 스토리지 데이터는 JavaScript를 통해 쉽게 접근하고 관리할 수 있습니다.
localStorage및sessionStorage객체를 사용하여 데이터를 저장, 조회, 수정, 삭제할 수 있습니다.
- 웹 스토리지는
동일 출처 정책(Same-Origin Policy)을 따릅니다. 웹 페이지는 해당 페이지와 동일한 출처(프로토콜, 도메인, 포트)를 가진 웹 스토리지 데이터에만 접근할 수 있습니다.
로컬 스토리지 vs 세션 스토리지
구분 | 로컬 스토리지 (Local Storage) | 세션 스토리지 (Session Storage) |
데이터 유지 기간 | 브라우저를 닫아도 유지됨 | 브라우저를 닫으면 삭제됨 |
저장 용량 | 5MB 이상 | 5MB 이상 |
데이터 공유 범위 | 같은 도메인 내 모든 탭에서 공유 | 현재 탭에서만 유지 |
쿠키, 세션, 웹 스토리지 비교
항목 | 쿠키 (Cookie) | 세션 (Session) | 웹 스토리지 (Web Storage) |
저장 위치 | 클라이언트 | 서버 | 클라이언트 |
자동 전송 | O (요청 시 자동 포함) | O (세션 ID 전송) | X (필요 시 직접 조회) |
만료 시점 | 설정 가능 | 일정 시간 후 만료 | 로컬 스토리지는 영구, 세션 스토리지는 브라우저 종료 시 삭제 |
보안성 | 낮음 (클라이언트에서 관리) | 높음 (서버에서 관리) | 높음 (자동 전송되지 않음) |
