Cookies

HTTP 쿠키는 웹 서버가 사용자의 브라우저에 저장하는 작은 텍스트 데이터로, 사용자 세션 관리와 개인화된 경험 제공을 위해 설계되었다.
HTTP의 무상태(Stateless) 특성을 보완하여 연속적인 요청 간 상태 유지가 가능하게 한다.

정의 및 목적

  • 데이터 저장 형식: 키=값 쌍으로 구성된 텍스트 파일.
  • 동작 원리:
    1. 서버 → Set-Cookie 헤더로 브라우저에 전송.
    2. 브라우저 → 이후 요청 시 Cookie 헤더에 포함.
1
2
3
4
5
6
7
// 서버 응답 예시
HTTP/2.0 200 OK
Set-Cookie: session_id=abc123; Secure; HttpOnly

// 클라이언트 요청 예시
GET /dashboard HTTP/2.0
Cookie: session_id=abc123

주요 용도

용도설명예시
세션 관리로그인 상태, 장바구니 정보 유지온라인 쇼핑몰 결제 과정
개인화언어 설정, 테마 저장다크 모드 자동 적용
트래킹사용자 행동 분석 및 광고 타겟팅구글 애널리틱스
  1. 세션 관리:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 로그인 세션 관리
app.post('/login', (req, res) => {
    // 사용자 인증 후
    const sessionId = generateSessionId();
    res.cookie('sessionId', sessionId, {
        httpOnly: true,
        secure: true,
        maxAge: 24 * 60 * 60 * 1000 // 24시간
    });
});
  1. 개인화:
1
2
3
4
// 사용자 선호도 저장
function saveUserPreference(theme) {
    document.cookie = `theme=${theme}; max-age=31536000; path=/`;
}
  1. 트래킹:
1
2
3
4
5
6
// 방문자 추적
function trackPageVisit() {
    let visits = getCookie('visitCount') || 0;
    visits++;
    document.cookie = `visitCount=${visits}; max-age=31536000`;
}

쿠키의 구성 요소

  • 이름=값: 쿠키는 기본적으로 이름과 값의 쌍으로 이루어진 문자열.
  • 만료 날짜(Expires) 또는 최대 수명(Max-Age): 쿠키의 유효 기간을 지정하며, 이 기간이 지나면 브라우저는 해당 쿠키를 삭제한다.
  • 도메인(Domain)과 경로(Path): 쿠키가 적용될 도메인과 경로를 지정하여 특정 범위에서만 쿠키를 전송하도록 제한할 수 있다.
  • 보안 속성: Secure 속성을 설정하면 쿠키는 HTTPS 연결에서만 전송되며, HttpOnly 속성을 설정하면 JavaScript와 같은 클라이언트 측 스크립트에서 쿠키에 접근할 수 없다.

주요 속성

속성설명예시
Name쿠키의 이름sessionId
Value쿠키의 값abc123xyz
Domain쿠키가 유효한 도메인.example.com
Path쿠키가 유효한 경로/
Expires/Max-Age쿠키 만료 시간Wed, 21 Oct 2024
SecureHTTPS에서만 전송Secure
HttpOnlyJS에서 접근 불가HttpOnly
SameSiteCSRF 방지 설정Strict, Lax, None
  1. Name과 Value:
1
2
// 쿠키의 기본 구성
document.cookie = "username=John Doe"; // 이름=값 형태
  1. Expires/Max-Age:
1
2
3
4
// 만료 시간 설정
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC";
// 또는 Max-Age 사용
document.cookie = "username=John Doe; max-age=3600"; // 1시간 후 만료
  1. Domain과 Path:
1
2
// 특정 도메인과 경로에서만 사용 가능한 쿠키
document.cookie = "user=John; domain=example.com; path=/blog";
  1. Secure와 HttpOnly:
1
2
3
4
// 보안 관련 설정
// Secure: HTTPS에서만 전송
// HttpOnly: JavaScript에서 접근 불가
response.setHeader('Set-Cookie', 'sessionId=abc123; Secure; HttpOnly');

주요 유형별 특징

기본 분류

유형저장 위치수명사용 사례
세션 쿠키브라우저 메모리브라우저 종료 시 삭제로그인 세션
지속형 쿠키디스크Expires/Max-Age 지정자동 로그인
서드파티 쿠키타 도메인 설정장기적크로스 사이트 광고 트래킹

특수 쿠키 (보안 리스크)

  • 슈퍼쿠키: 일반 삭제로 제거 불가능
  • 플래시 쿠키: Adobe Flash 기반, 브라우저 외부 저장
  • 좀비 쿠키: 삭제 후 자동 재생성

쿠키 작동 방식

  1. 쿠키 설정 과정
    1. 클라이언트가 웹사이트 방문
    2. 서버가 Set-Cookie 헤더로 쿠키 전송
    3. 브라우저가 쿠키 저장
    4. 이후 요청시 자동으로 쿠키 전송
  2. 쿠키 전송 과정
    1. 브라우저가 HTTP 요청 준비
    2. 유효한 쿠키 확인
    3. Cookie 헤더에 쿠키 포함
    4. 서버로 요청 전송

쿠키 관리 및 보안

HTTP 쿠키의 보안 속성은 XSS(교차 사이트 스크립팅), CSRF(교차 사이트 요청 위조) 등 웹 공격을 방어하고 사용자 데이터를 보호하기 위해 설계되었다.

HttpOnly

  • 목적: 이 플래그가 설정된 쿠키는 JavaScript 등의 클라이언트 측 스크립트에서 접근할 수 없다 (XSS 공격 방지).
  • : Boolean (true/false 또는 속성 존재 유무)
  • 동작 예시:
1
Set-Cookie: session_id=abc123; HttpOnly
  • 효과:
    • document.cookie로 쿠키 조회/수정 불가능
    • 주로 세션 ID, 인증 토큰 등 민감 정보에 적용

Secure

.

  • 목적: HTTPS 전용 전송 (중간자 공격 방지)
  • : Boolean (true/false 또는 속성 존재 유무)
  • 동작 예시:
1
Set-Cookie: auth_token=xyz; Secure
  • 효과:
    • HTTP 요청 시 쿠키 전송 차단
    • SameSite=None 사용 시 반드시 필요

SameSite

  • 목적: 크로스 사이트 요청 제한 (CSRF 방지)
  • :
설명적용 예시
Strict동일 도메인 요청만 허용금융 거래, 관리자 페이지
Lax기본값. GET 요청 시 외부 도메인 허용 (예: 링크 클릭)일반 웹 사이트
None모든 크로스 사이트 요청 허용 (Secure 필수)타사 위젯, SSO 통합
  • 동작 예시:
1
Set-Cookie: tracking=123; SameSite=Lax; Secure

추가 속성 (보안 연계)

속성설명
Domain쿠키 전송 허용 도메인 지정 (예: .example.com → 서브도메인 포함)
Path특정 경로에서만 쿠키 전송 (예: /admin)
Max-Age쿠키 유효 시간 설정 (초 단위)
  1. Domain=example.com:
    • 이 쿠키가 전송될 수 있는 도메인을 지정한다.
    • 여기서는 example.com과 그 서브도메인에서만 쿠키가 사용될 수 있다.
  2. Path=/:
    • 이 쿠키가 전송될 수 있는 URL 경로를 지정한다.
    • ‘/‘는 도메인의 모든 경로에서 쿠키가 사용될 수 있음을 의미한다.
  3. Max-Age=3600:
    • 쿠키의 유효 기간을 초 단위로 설정한다.
    • 여기서는 쿠키가 생성된 후 3600초(1시간) 동안 유효하다.

속성 조합 및 권장 사례

최적 보안 설정 예시
1
2
3
4
5
6
7
Set-Cookie: 
  __Secure-session=def456; 
  Secure; 
  HttpOnly; 
  SameSite=Strict; 
  Path=/; 
  Max-Age=3600
  • __Secure- 접두사: Secure 속성 강제 적용
  • SameSite=Strict: CSRF 완전 차단
  • Max-Age=3600: 1시간 후 자동 삭제
주의사항
  • SameSite=None + Secure 필수: 크로스 사이트 허용 시 HTTPS 강제
  • 도메인 범위 최소화: 불필요한 서브도메인 접근 차단 (예: Domain=api.example.com)
  • 민감 정보 암호화: Secure만으로는 충분하지 않음 → HTTPS + 데이터 암호화 병행

보안 이슈 및 대응

주요 공격 유형

공격 유형설명예방 조치
XSS악성 스크립트로 쿠키 탈취HttpOnly 속성 사용
CSRF사용자 권한 도용 요청 위조SameSite=Strict 설정
세션 하이재킹암호화되지 않은 쿠키 전송 시 가로채기Secure 속성 강제
  1. XSS 방지:
1
2
// HttpOnly 플래그 사용
response.setHeader('Set-Cookie', 'sessionId=abc123; HttpOnly');
  1. CSRF 방지:
1
2
3
4
5
6
// CSRF 토큰 사용
const csrfToken = generateToken();
response.cookie('XSRF-TOKEN', csrfToken, {
    httpOnly: false,
    secure: true
});
  1. 쿠키 암호화:
1
2
3
4
5
// 민감한 데이터 암호화
function setEncryptedCookie(name, value) {
    const encryptedValue = encrypt(value);
    document.cookie = `${name}=${encryptedValue}; Secure`;
}

보안 속성 비교

1
2
3
4
5
Set-Cookie: auth_token=xyz; 
  Secure     // HTTPS 전용 전송
  HttpOnly   // JavaScript 접근 차단
  SameSite=Lax // 크로스 사이트 요청 제한
  Max-Age=3600 // 1시간 유지

개인정보 보호 대책

사용자 측 조치

  • 브라우저 설정: 서드파티 쿠키 차단
  • 확장 프로그램: 트래커 차단 툴(예: uBlock Origin) 설치
  • 수동 관리: 주기적 쿠키 삭제

법적 규제

  • GDPR(유럽): 명시적 동의 필요
  • CCPA(미국): 데이터 판매 거부권 보장

개발자 권장 사항

  1. 필수 최소화: 세션 ID 외 민감 정보 저장 금지.
  2. 암호화: HTTPS 전용 통신 + Secure 속성 병용.
  3. 주기적 갱신: 세션 토큰 주기 변경으로 하이재킹 리스크 감소.
  4. CSP 적용: 스크립트 출처 제한으로 XSS 방지.

실무 팁:

  • API 요청 시 Authorization: Bearer 헤더 사용이 쿠키보다 보안성 높음.
  • 로컬 스토리지 대신 sessionStorage로 임시 데이터 관리.

쿠키의 제한사항

  1. 크기 제한:

    • 대부분의 브라우저에서 쿠키 하나당 4KB로 제한
    • 도메인당 총 쿠키 수도 제한됨
  2. 보안 위험:

    • XSS, CSRF 등의 공격에 취약할 수 있음
    • 적절한 보안 설정 필요
  3. 프라이버시 문제:

    • 사용자 추적에 사용될 수 있음
    • GDPR 등 개인정보보호 규정 준수 필요

참고 및 출처