한양과학기술고등학교

에듀테크 프로젝트 대시보드

쿠키 & 세션 인증

🌐 브라우저 document.cookie
🗄️ 서버 세션 저장소 session_store
session_iduserexpires
(비어있음)

🚩 쿠키 보안 플래그
HttpOnly ON
Secure ON
SameSite=Lax ON
HttpOnly가 켜지면 JS의 document.cookie로 세션 쿠키를 읽을 수 없어 XSS 탈취를 막습니다. 왼쪽에서 "악성 스크립트로 쿠키 훔치기"를 눌러 차이를 확인하세요.
🐍 FastAPI 서버 코드 main.py
@app.post("/login") async def login(username: str = Form(...)): sid = secrets.token_hex(16) session_store[sid] = {"user": username} resp = JSONResponse({"ok": True}) resp.set_cookie( key="session_id", value=sid, httponly=True, secure=True, samesite="lax", ) return resp
@app.get("/mypage") async def mypage(request: Request): sid = request.cookies.get("session_id") session = session_store.get(sid) if not session: raise HTTPException(401) return {"user": session["user"]}
📋 네트워크 로그 실시간
// 대기 중...
⚡ 로그인 → 세션 유지 흐름
① 브라우저 → 서버 : POST /login
↓
② 서버 → 브라우저 : Set-Cookie: session_id=...
↓ (브라우저가 자동 저장)
③ 브라우저 → 서버 : Cookie: session_id=... (모든 요청에 자동 첨부)
↓
④ 서버가 session_store 조회 → 사용자 확인 → 응답
핵심: 서버는 요청마다 신원을 기억하지 못하는 무상태(stateless) HTTP 위에서, 쿠키에 담긴 세션 ID로 "이전 로그인과 같은 사용자"임을 증명합니다.
🆚 세션 쿠키 vs JWT

세션 쿠키 (Stateful)

서버가 session_store에 상태 저장
즉시 강제 로그아웃 가능 (서버에서 삭제)
서버가 늘어나면 세션 공유 필요 (Redis 등)
쿠키에는 무작위 ID만 담김

JWT (Stateless)

서버가 상태를 저장하지 않음
토큰 자체에 서명된 정보 포함
발급 후 강제 무효화가 어려움
서버 확장(수평 스케일)에 유리
━━━━', 'danger'); if (httpOnly) { box.className = 'cs-hbox hb-safe'; box.innerHTML = `document.cookie → ""
HttpOnly 쿠키는 JavaScript에서 아예 보이지 않습니다. 탈취 실패!`; csAddLog(' └─ document.cookie = "" → ✅ HttpOnly가 세션 쿠키 노출 차단', 'safe'); } else { box.className = 'cs-hbox hb-danger'; box.innerHTML = `document.cookie → "session_id=${csState.sessionId}"
HttpOnly가 꺼져 있어 스크립트가 세션 쿠키를 그대로 읽어 서버로 전송할 수 있습니다. 탈취 성공!`; csAddLog(` └─ document.cookie = "session_id=${csState.sessionId}" → 💀 외부로 전송됨`, 'danger'); } } csUpdateCodeFlags();