쿠키기반 세션과 Application Storage

seul_velog·2023년 8월 28일

쿠키(Cookies)

쿠키는 웹 브라우저에서 사용하는 작은 데이터 조각이다.
웹 서버는 HTTP 응답 헤더를 사용하여 브라우저에 쿠키를 설정할 수 있으며, 브라우저는 그 후의 모든 요청에 해당 쿠키를 포함시킨다.
쿠키는 주로 사용자의 선호 설정, 로그인 상태, 장바구니 정보 등을 저장하는 데 사용된다.

세션(Sessions)

세션은 서버 측에서 사용자의 상태를 저장하기 위한 메커니즘이다.
세션은 일반적으로 고유한 세션 ID를 사용하여 식별된다. 이 ID는 쿠키를 통해서 사용자의 브라우저에 전송될 수 있다.
쿠키만 사용할 때와 달리 세션은 민감한 데이터를 브라우저가 아닌 서버 측에 안전하게 저장할 수 있다.

쿠키 기반 세션

웹에서 사용자 상태를 유지하기 위한 기술 중 하나이다.
웹은 본질적으로 상태가 없는(stateless) 프로토콜인 HTTP를 기반으로 한다. 이는 각 HTTP 요청이 독립적이라는 것을 의미하며, 서버는 이전 요청에서의 정보를 기억하지 않는다. 쿠키와 세션은 이러한 상태 없음의 한계를 극복하기 위한 메커니즘이다

쿠키 기반 세션은 쿠키와 세션의 두 개념을 결합한 것이다.
이 방식에서, 세션 ID는 쿠키를 통해 브라우저에 저장된다. 브라우저는 요청을 할 때마다 이 세션ID를 포함시키고, 서버는 이 ID를 사용하여 해당 사용자의 세션 데이터에 접근한다.
따라서 "쿠키 기반 세션"은 서버 측 세션 데이터와 클라이언트 측 쿠키 간의 연결을 의미한다.

✍️ '쿠키'는 브라우저에서 저장되는 작은 데이터 조각, '세션'은 서버에서 사용자의 상태를 저장하는 메커니즘이며, '쿠키 기반 세션'은 이 두 개념을 결합하여 사용자의 상태를 유지하는 방식 😤

쿠키 기반 세션 작동 방식

1. 세션 생성
: 사용자가 웹 사이트에 처음 접속하면, 서버는 고유한 세션ID를 생성한다.

2. 쿠키에 세션ID 저장
: 서버는 응답의 HTTP헤더에 'Set-Cookie'를 포함하여 브라우저에게 이 세션 ID를 쿠키로 저장하도록 지시한다. 이 쿠키는 일반적으로 'sessionid' 또는 비슷한 이름을 가진다.

3. 브라우저의 다음 요청에서 쿠키 전송
: 브라우저는 이후 웹 사이트에 대한 모든 요청에 이 쿠키를 자동으로 포함시킨다.

4. 서버에서 세션ID 확인
: 서버는 들어오는 요청의 쿠키를 확인하여 해당 세션 ID와 연관된 데이터에 접근한다. 이를 통해 사용자 로그인 상태, 장바구니 내용, 사용자 환경 설정 등 사용자 특정 상태를 유지할 수 있다.

5. 세션 만료
: 세션은 특정 시간 동안만 유효하도록 설정될 수 있다. 이 시간이 지나면 세션은 만료되고, 사용자는 다시 로그인을 하거나 특정 상태를 재설정해야 할 수 있다.

즉, 이러한 과정으로 로그인 상태를 유지할 수 있도록 도와준다.

쿠키 기반 세션 주의사항

1. 보안
: 세션 ID는 예측이 불가능하게 생성되어야 하며, 주기적으로 재생성될 필요가 있다. 또한 HTTPS를 사용하여 세션 쿠키를 전송하는 것이 좋다.

2. 크로스 사이트 스크립팅(XSS) 및 크로스 사이트 요청 위조(CSRF) 공격
: 이러한 공격 방법은 세션 쿠키를 타겟으로 하므로 적절한 보안 조치가 필요하다.

3. 스케일링 및 유지관리
: 큰 규모의 웹 애플리케이션에서는 세션 데이터를 효과적으로 저장하고 관리하는 것이 중요하다. 이를 위해 분산 세션 저장소나 캐시 시스템이 사용될 수 있다.

Application Storage

웹 개발자 도구의 'Application'탭, 또는 'Storage' 에서는 웹 브라우저에서 사용하는 여러 저장소 옵션이 표시된다. 주요 저장소 옵션에는 local Storage, sessionStorage, Cookies 가 있다.

JSON과 Local Storage 정리 보러가기
쿠키와 세션 정리 보러가기

Local Storage

localStorage는 웹 브라우저에서 제공하는 클라이언트 측 저장소이다.
데이터는 영구적으로 저장되며, 브라우저를 닫거나 컴퓨너를 재부팅해도 삭제되지 않는다.
쿠키와 달리 localStorage에 저장된 데이터는 서버와 자동으로 교환되지 않는다.

특징

영구적 저장: localStorage에 저장된 데이터는 만료 시간이 없으며, 사용자가 수동으로 삭제하거나 웹 애플리케이션이 삭제 요청을 보내지 않는 한 브라우저에 영구적으로 저장된다.
도메인 제한: 데이터는 웹 페이지의 출처(도메인, 프로토콜, 포트)에 따라 분리된다. 따라서 다른 출처의 웹 페이지는 해당 데이터에 접근할 수 없다.
크기 제한: 대부분의 브라우저에서 localStorage의 크기 제한은 약 5MB~10MB이다.
자동 전송 없음: localStorage에 저장된 데이터는 HTTP 요청과 함께 자동으로 서버에 전송되지 않는다.

사용사례

사용자 설정: 사용자의 테마 선택, 볼륨 조절 등의 개인화 설정을 저장할 때
장바구니 정보: 사용자가 장바구니에 추가한 상품 목록을 저장할 때
→ 로컬스토리지에 장바구니 정보를 임시 저장한 뒤 사용자가 결제나 로그인 과정을 진핼할 때 해당 정보를 전송하여 저장하는 방식일 수도 있다.
게임의 진행 상황: 웹 기반 게임에서 사용자의 진행 상황을 저장할 때

Session Storage

sessionStorage도 웹 브라우저에서 제공하는 클라이언트 측 저장소이다.
탭 또는 브라우저 창이 열려 있는 동안에만 데이터를 저장한다.
sessionStarage는 일시적인 데이터를 저장하기 위해 사용된다.

특징

세션 지속성: sessionStorage에 저장된 데이터는 브라우저 탭이나 윈도우 세션이 종료될 때 삭제된다. 새 탭이나 윈도우를 열면 새로운 스토리지 영역이 생성된다.
도메인 제한: localStorage와 마찬가지로 데이터는 웹 페이지의 출처에 따라 분리된다.
크기 제한: sessionStorage의 크기 제한도 localStorage와 유사하게 대부분의 브라우저에서 5MB~10MB이다.
자동 전송 없음: sessionStorage에 저장된 데이터도 HTTP 요청과 함께 자동으로 서버에 전송되지 않는다.

사용사례

임시 사용자 입력: 양식의 임시 데이터를 저장하여 페이지를 새로 고칠 때 데이터가 사라지지 않게 한다.
멀티 탭 웹 애플리케이션: 여러 탭에서 동일한 애플리케이션을 사용할 때 각 탭의 상태를 별도로 관리한다.
→ 온라인 문서 편집기(탭간의 작업문서는 서로 다른 상태를 가질 수 있다.)

Cookies

쿠키는 브라우저에서 사용하는 작은 데이터 조각이다.
웹 서버와 브라우저 간에 데이터를 주고받을 때(요청,응답) 사용되며, HTTP 요청 헤더에 포함되어 전송된다.
만료 날짜/시간을 설정할 수 있다.
로그인 상태, 사용자 설정, 세션ID 등의 정보를 저장하는 데 주로 사용된다.

✍️ 개발자도구 Application탭 내의 Storage탭에서 Cookies 섹션을 보면, 현재 웹사이트에 대한 쿠키들의 목록 조회가 가능하다. 각 쿠키는 이름, 값, 만료시간, 경로, 도메인 등의 속성을 갖는다.
이러한 쿠키는 브라우저에 저장되어 있으며, 브라우저가 해당 도메인에 요청을 보낼 때마다 이 쿠키는 HTTP 헤더에 자동으로 포함된다.

특징

만료 시간: 각 쿠키는 만료 시간을 가질 수 있다. 만료 시간이 지나면 브라우저는 해당 쿠키를 삭제한다.
도메인 및 경로 제한: 쿠키는 특정 도메인 및 경로에 대해서만 전송될 수 있도록 제한될 수 있다.
크기 제한: 쿠키는 보통 4KB로 크기에 제한이 있다.
자동 전송: 브라우저는 해당 도메인에 요청을 보낼 때 쿠키를 자동으로 HTTP 헤더에 포함시킨다.

사용사례

세션 관리: 사용자 로그인 정보, 쇼핑카트, 게임 점수 등을 저장할 때
개인화: 사용자 선호, 테마 선택 등의 사용자 설정을 저장할 때
추적: 사용자의 웹 사이트 방문 기록 및 활동을 추적할 때

❗️ 스토리지 이전에 언급한 '세션'과 'sessionStorage'는 이름이 유사하지만 다르게 작동한다!
세션
: 서버 측에서 관리되는 사용자 상태 데이터이다. 세션 ID는 쿠키를 통해 브라우저에 전송될 수 있다. 이 ID를 사용하여 서버는 해당 사용자의 세션 데이터에 접근한다.

세션스토리지
: 클라이언트 측에서 관리되는 일시적인 데이터 저장소이다. 서버와의 교환 없이 브라우저에서만 사용된다.😀