◇ PART · BOARD

쿠키 깊이 보기

브라우저 쪽에 저장됨

학습 목표

쿠키가 어디에·어떻게 저장되는지 직접 본다
서버에서 쿠키 발급·읽기 코드
옵션 (maxAge, path, HttpOnly, Secure) 의 효과

⚠️ 쿠키가 어디 있는지 본 적 없다

막연한 개념

「쿠키」 라는 단어는 들어봤지만 — 실제로 어디 저장되어 있는지, 어떤 모양인지 본 적이 없습니다.

F12 로 직접 확인합니다.

🛠️ 쿠키의 정체

브라우저에 저장되는 작은 메모

서버가 발급한 텍스트 한 줄(이름=값)이 브라우저 안에 저장. 이후 모든 요청에 자동으로 함께 보내짐.

F12 로 직접 보기

크롬에서 어떤 사이트든 접속 (네이버 등)
F12 → Application 탭 → Cookies 펼치기
도메인 선택 → 쿠키 표가 보임

스크린샷

F12 Application 탭의 Cookies. Name·Value·Domain·Expires·HttpOnly 등 컬럼으로 표

쿠키 한 줄의 구성

필드	의미
Name	쿠키 이름 (key)
Value	저장된 값
Domain	이 쿠키가 유효한 도메인
Path	이 쿠키가 유효한 경로
Expires	만료 시간
HttpOnly	JS 접근 불가 표시
Secure	HTTPS 전용
SameSite	크로스 도메인 정책

서버 → 브라우저 쿠키 발급


@GetMapping("/setcookie")
public String setCookie(HttpServletResponse resp) {
    Cookie c = new Cookie("theme", "dark");
    c.setMaxAge(60 * 60 * 24);    // 24 시간
    c.setPath("/");                // 사이트 전체에서 유효
    c.setHttpOnly(true);           // JS 접근 차단
    resp.addCookie(c);
    return "redirect:/";
}

👉 응답 헤더에 Set-Cookie: theme=dark; Max-Age=86400; Path=/; HttpOnly 추가됨.

브라우저 → 서버 쿠키 읽기


// 방법 ① @CookieValue
@GetMapping("/main")
public String main(@CookieValue(value="theme", defaultValue="light") String theme,
                    Model model) {
    model.addAttribute("theme", theme);
    return "main";
}

// 방법 ② HttpServletRequest 직접
@GetMapping("/main")
public String main(HttpServletRequest req) {
    Cookie[] cookies = req.getCookies();
    for (Cookie c : cookies) {
        if ("theme".equals(c.getName())) {
            String theme = c.getValue();
        }
    }
    return "main";
}

쿠키 옵션 — 보안

옵션	의미	왜 필요
HttpOnly	JS document.cookie 접근 차단	XSS 방어
Secure	HTTPS 에서만 전송	중간자 공격 방어
SameSite	크로스 도메인 요청 시 제한	CSRF 방어
Domain	유효 도메인 한정	의도치 않은 공유 방지
MaxAge	유효 시간 (초)	오래된 쿠키 자동 삭제

쿠키의 한계

조심할 것

크기 제한 — 한 쿠키 ~4KB
매 요청에 전송 — 너무 많으면 네트워크 부담
사용자가 봄·변조 가능 — 민감 데이터 X
다른 서브도메인 공유 — Domain 옵션 주의

일반적 사용처

로그인 유지의 「열쇠」 — JSESSIONID (자동)
UI 설정 — 다크모드, 폰트 크기
최근 본 상품 — 쇼핑몰
광고 추적 — 제 3 자 쿠키
장바구니 (비회원)

쿠키 삭제


Cookie c = new Cookie("theme", "");
c.setMaxAge(0);          // 즉시 만료
c.setPath("/");
resp.addCookie(c);

👉 「삭제」 = 「MaxAge 를 0 으로 하는 같은 이름의 쿠키 발급」.

실험 — 쿠키 직접 만져보기

F12 Application → Cookies 에서 임의 쿠키 삭제
로그인 사이트라면 — JSESSIONID 삭제 시 로그인 풀림
F12 Console 에서 document.cookie 입력 → JS 가 볼 수 있는 쿠키 출력
HttpOnly 쿠키는 위 결과에 안 보임 (보안 효과 확인)

🔄 Before / After

전 차시 끝

쿠키라는 개념만 안다.

→

이번 차시 끝

F12 로 쿠키를 직접 보고 만질 수 있다. 발급·읽기·옵션을 안다.

정리

오늘 들고 가는 것

쿠키 = 브라우저에 저장되는 「Name=Value」 메모
매 요청에 자동 동봉
HttpOnly·Secure·SameSite 보안 옵션
F12 Application 탭에서 직접 확인