쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터이며, 매 요청마다 서버에 자동으로 전송됩니다.세션은 서버에 저장되는 사용자 상태 정보이며, 세션 ID만 쿠키로 클라이언트에 전달합니다. 쿠키는 용량 제한(4KB)이 있고 클라이언트에서 조작 가능하지만, 세션은 서버 메모리를 사용하며 보안적으로 더 안전합니다.
01 · Concept
쿠키와 세션
HTTP는 무상태(stateless) 프로토콜이므로, 사용자 인증 상태를 유지하기 위해 쿠키, 세션, JWT 등의 메커니즘을 사용합니다.
쿠키는 브라우저에 저장되어 매 요청마다 자동 전송되는 작은 데이터입니다.세션은 서버에 상태를 저장하고 세션 ID만 쿠키로 전달합니다.JWT는 토큰 자체에 정보를 담아 무상태 인증을 구현합니다. 각 방식의 보안 속성과 트레이드오프를 이해하는 것이 중요합니다.
02 · Interactive Demo
쿠키/세션/JWT 인증 흐름 비교
각 인증 방식의 요청-응답 흐름을 단계별로 확인하세요.
서버에 세션을 저장하고, 쿠키로 세션 ID 전달
Client
→
로그인 요청
POST /login { id, pw }
←
세션 생성
sessions[sessionId] = user
←
쿠키 설정
Set-Cookie: sid=abc; HttpOnly
→
이후 요청
Cookie: sid=abc (자동 전송)
←
세션 확인
sessions['abc'] → user 정보
Server
장점
+ 서버에서 세션 관리 가능
+ 쿠키 만료로 자동 로그아웃
+ HttpOnly로 XSS 방지
단점
- 서버 메모리 사용
- 수평 확장 시 세션 공유 필요
- CSRF 공격 취약
03 · Code Example
코드 예시
실제 코드로 동작 원리를 확인하세요.
// 서버에서 쿠키 설정 (Express)
res.cookie('sessionId', 'abc123', {
httpOnly: true, // JS에서 접근 불가 (XSS 방지)
secure: true, // HTTPS에서만 전송
sameSite: 'strict', // 같은 사이트에서만 전송 (CSRF 방지)
maxAge: 3600000, // 1시간 (밀리초)
path: '/', // 쿠키 전송 경로
domain: '.example.com', // 서브도메인 포함
});
// 클라이언트에서 쿠키 읽기
document.cookie; // "theme=dark; lang=ko"
// HttpOnly 쿠키는 여기에 표시되지 않음!04 · Interview Point
면접 핵심 질문
JWT는 Header.Payload.Signature 구조의 자가 포함(self-contained) 토큰입니다. 서버에 상태를 저장하지 않는 무상태(stateless) 인증을 가능하게 합니다. Payload에 사용자 정보를 담지만 Base64 인코딩일 뿐 암호화가 아니므로민감 정보를 담으면 안 됩니다. Signature로 변조를 감지하며,
exp 클레임으로 만료 시간을 설정합니다.SameSite는 크로스 사이트 요청 시 쿠키 전송을 제어하는 속성입니다.Strict: 같은 사이트 요청에서만 쿠키 전송 (가장 엄격).Lax: 탑레벨 네비게이션(링크 클릭)에서는 허용 (기본값).None: 모든 크로스 사이트에서 허용 (Secure 필수). CSRF 공격 방지에 효과적이며, Chrome은 기본값을 Lax로 설정합니다.