Cookie & Session 관리 — 서버/클라이언트 양쪽에서
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. `httpOnly` 쿠키 속성이 방어하는 공격 유형은?
💡 `httpOnly: true`로 설정된 쿠키는 브라우저의 JavaScript(`document.cookie`)로 접근할 수 없습니다. XSS 공격으로 악성 스크립트가 실행되더라도 쿠키를 읽을 수 없어 토큰 탈취를 방어합니다.
Q2. Next.js Route Handler에서 응답에 쿠키를 설정하는 올바른 방법은?
💡 Route Handler에서는 `NextResponse` 객체의 `cookies.set()` 메서드를 사용합니다. `cookies()` from `next/headers`는 읽기 전용이며, 응답에 쿠키를 설정할 때는 response 객체를 통해야 합니다.
Q3. `sameSite: 'lax'` 속성이 방어하는 공격은?
💡 `sameSite`는 CSRF를 방어합니다. `lax`는 최상위 탐색(링크 클릭)에서는 쿠키를 전송하지만, 다른 사이트의 iframe이나 AJAX 요청에서는 쿠키를 보내지 않습니다. `strict`는 더 엄격하고 `none`은 차단하지 않습니다.
Q4. 쿠키를 즉시 삭제(만료)하는 방법으로 올바른 것은?
💡 Next.js에서 쿠키를 삭제하는 방법은 두 가지입니다. `cookies.delete(name)`을 직접 호출하거나, `maxAge: 0` (또는 과거의 `expires`)으로 설정해 즉시 만료시킬 수 있습니다. 두 방법 모두 유효합니다.
Q5. 쿠키에 저장되는 데이터의 최대 크기 제한은?
💡 브라우저 쿠키는 도메인당 약 4KB의 크기 제한이 있습니다. JWT에 과도한 클레임을 추가하면 이 제한을 초과할 수 있습니다. 대용량 세션 데이터는 서버(Redis 등)에 저장하고 쿠키에는 세션 ID만 담는 것이 좋습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.