Files
2nd/10_Wiki/Topics/Coding/Security_CSRF_Patterns.md
T
2026-05-09 21:08:02 +09:00

4.2 KiB

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases
id title category status source_trust_level verification_status created_at updated_at tags tech_stack applied_in aliases
security-csrf-patterns CSRF — Cookie 인증의 함정 Coding draft B conceptual 2026-05-09 2026-05-09
security
csrf
cookies
vibe-coding
language applicable_to
TypeScript / Express
Web
Cross-Site Request Forgery
SameSite
double submit
CSRF token

CSRF — Cookie 인증의 함정

Cookie 가 자동 전송되는 점을 노린 공격. SameSite=Strict/Lax 가 1차 방어, CSRF token (double submit) 이 2차. Authorization header (JWT in memory) 사용 시엔 CSRF 자체가 거의 무관.

📖 핵심 개념

공격자: evil.com 의 form 이 자동으로 bank.com/transfer 로 POST. 사용자 cookie 가 자동 첨부 → 인증 통과.

방어:

  • SameSite cookie: 다른 origin 에서 cookie 안 보냄.
  • CSRF token: 매 form 마다 고유 token, 서버가 cookie 와 form 두 곳 비교.
  • Origin / Referer header 검증: 보조.
  • JWT in Authorization header (cookie 아님): CSRF 자동 면역.

💻 코드 패턴

res.cookie('session', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict', // 또는 'lax' (top-level GET 허용)
  path: '/',
  maxAge: 7 * 24 * 60 * 60 * 1000,
});

Strict: cross-site 어떤 요청도 cookie 안 감. 외부 링크 클릭으로 들어와도 cookie X (UX 영향). Lax: top-level GET 만 OK. 폼 POST / iframe 차단. None: cross-site OK — Secure 필수. 거의 안 씀.

import csrf from 'csurf';
app.use(csrf({ cookie: true }));

// 페이지 렌더 시
app.get('/dashboard', (req, res) => {
  res.render('dashboard', { csrfToken: req.csrfToken() });
});
// → form 안에 <input type="hidden" name="_csrf" value="...">

// 모든 POST 가 자동 검증
app.post('/transfer', (req, res) => {
  // csurf 가 이미 검증
  doTransfer(req.body);
});

Custom header — SPA

// CSRF token을 cookie + JS-readable form 둘 다.
// SPA 가 fetch 시 X-CSRF-Token 헤더로 전송.
res.cookie('csrf_token', token, { httpOnly: false, sameSite: 'strict', secure: true });

// 서버 검증
app.use((req, res, next) => {
  if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(req.method)) {
    const cookie = req.cookies.csrf_token;
    const header = req.header('x-csrf-token');
    if (!cookie || cookie !== header) return res.status(403).end();
  }
  next();
});

// 클라이언트
fetch('/api/x', {
  method: 'POST',
  headers: { 'X-CSRF-Token': getCookie('csrf_token') },
  credentials: 'include',
});

Origin / Referer 검증 (보조)

const allowedOrigins = ['https://app.example.com'];
app.use((req, res, next) => {
  if (req.method !== 'GET') {
    const origin = req.header('origin');
    if (!origin || !allowedOrigins.includes(origin)) return res.status(403).end();
  }
  next();
});

🤔 의사결정 기준

인증 방식 CSRF 위험
Cookie (session) 위험 — SameSite + token
Authorization: Bearer (memory) 거의 무관 (XSS 가 진짜 위험)
Cookie + Authorization 혼용 둘 다 점검
OAuth implicit (deprecated) 별도 위험
API 종류 보호
Same-origin SPA + cookie SameSite + token
Cross-origin SPA + cookie SameSite=None + Secure + token + Origin 검증
Mobile app Bearer token (cookie 아님)
Public read API CSRF 불필요

안티패턴

  • GET 으로 mutation: GET 은 CSRF token 검증 안 하는 경우 많음. 항상 POST/PUT/DELETE.
  • 모든 cookie SameSite=None: cross-site 무방비. 실제 필요한 경우만.
  • CSRF token 을 GET response 의 body 에: 다른 origin 이 fetch 못 보는 동안 OK 지만 캐시되면 누설.
  • token 검증 timing attack: === 대신 constant-time compare.
  • 세션과 token 불일치 무시: 그냥 통과.
  • Referer 만 의존: 일부 브라우저 / 프록시 가 strip.
  • CSRF token 을 URL query 에: 로그 / referer 누설.

🤖 LLM 활용 힌트

  • Cookie auth = SameSite + double submit token + Origin 검증 3종.
  • Bearer token (memory) 가 SPA 의 더 단순한 답.

🔗 관련 문서