Cookies#
HTTP 쿠키는 웹 서버가 사용자의 브라우저에 저장하는 작은 텍스트 데이터로, 사용자 세션 관리와 개인화된 경험 제공을 위해 설계되었다.
HTTP의 무상태(Stateless) 특성을 보완하여 연속적인 요청 간 상태 유지가 가능하게 한다.
정의 및 목적#
- 데이터 저장 형식:
키=값
쌍으로 구성된 텍스트 파일. - 동작 원리:
- 서버 →
Set-Cookie
헤더로 브라우저에 전송. - 브라우저 → 이후 요청 시
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
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
2
3
4
| // 사용자 선호도 저장
function saveUserPreference(theme) {
document.cookie = `theme=${theme}; max-age=31536000; path=/`;
}
|
- 트래킹:
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 |
Secure | HTTPS에서만 전송 | Secure |
HttpOnly | JS에서 접근 불가 | HttpOnly |
SameSite | CSRF 방지 설정 | Strict, Lax, None |
- Name과 Value:
1
2
| // 쿠키의 기본 구성
document.cookie = "username=John Doe"; // 이름=값 형태
|
- 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시간 후 만료
|
- Domain과 Path:
1
2
| // 특정 도메인과 경로에서만 사용 가능한 쿠키
document.cookie = "user=John; domain=example.com; path=/blog";
|
- Secure와 HttpOnly:
1
2
3
4
| // 보안 관련 설정
// Secure: HTTPS에서만 전송
// HttpOnly: JavaScript에서 접근 불가
response.setHeader('Set-Cookie', 'sessionId=abc123; Secure; HttpOnly');
|
주요 유형별 특징#
기본 분류#
유형 | 저장 위치 | 수명 | 사용 사례 |
---|
세션 쿠키 | 브라우저 메모리 | 브라우저 종료 시 삭제 | 로그인 세션 |
지속형 쿠키 | 디스크 | Expires/Max-Age 지정 | 자동 로그인 |
서드파티 쿠키 | 타 도메인 설정 | 장기적 | 크로스 사이트 광고 트래킹 |
특수 쿠키 (보안 리스크)#
- 슈퍼쿠키: 일반 삭제로 제거 불가능
- 플래시 쿠키: Adobe Flash 기반, 브라우저 외부 저장
- 좀비 쿠키: 삭제 후 자동 재생성
쿠키 작동 방식#
- 쿠키 설정 과정
- 클라이언트가 웹사이트 방문
- 서버가 Set-Cookie 헤더로 쿠키 전송
- 브라우저가 쿠키 저장
- 이후 요청시 자동으로 쿠키 전송
- 쿠키 전송 과정
- 브라우저가 HTTP 요청 준비
- 유효한 쿠키 확인
- Cookie 헤더에 쿠키 포함
- 서버로 요청 전송
쿠키 관리 및 보안#
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 | 쿠키 유효 시간 설정 (초 단위) |
- Domain=example.com:
- 이 쿠키가 전송될 수 있는 도메인을 지정한다.
- 여기서는 example.com과 그 서브도메인에서만 쿠키가 사용될 수 있다.
- Path=/:
- 이 쿠키가 전송될 수 있는 URL 경로를 지정한다.
- ‘/‘는 도메인의 모든 경로에서 쿠키가 사용될 수 있음을 의미한다.
- 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 속성 강제 |
- XSS 방지:
1
2
| // HttpOnly 플래그 사용
response.setHeader('Set-Cookie', 'sessionId=abc123; HttpOnly');
|
- CSRF 방지:
1
2
3
4
5
6
| // CSRF 토큰 사용
const csrfToken = generateToken();
response.cookie('XSRF-TOKEN', csrfToken, {
httpOnly: false,
secure: true
});
|
- 쿠키 암호화:
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(미국): 데이터 판매 거부권 보장
개발자 권장 사항#
- 필수 최소화: 세션 ID 외 민감 정보 저장 금지.
- 암호화: HTTPS 전용 통신 +
Secure
속성 병용. - 주기적 갱신: 세션 토큰 주기 변경으로 하이재킹 리스크 감소.
- CSP 적용: 스크립트 출처 제한으로 XSS 방지.
실무 팁:
- API 요청 시
Authorization: Bearer
헤더 사용이 쿠키보다 보안성 높음. - 로컬 스토리지 대신
sessionStorage
로 임시 데이터 관리.
쿠키의 제한사항#
크기 제한:
- 대부분의 브라우저에서 쿠키 하나당 4KB로 제한
- 도메인당 총 쿠키 수도 제한됨
보안 위험:
- XSS, CSRF 등의 공격에 취약할 수 있음
- 적절한 보안 설정 필요
프라이버시 문제:
- 사용자 추적에 사용될 수 있음
- GDPR 등 개인정보보호 규정 준수 필요
참고 및 출처#