CSRF 방어: 토큰 + SameSite 쿠키

1. 사용자가 example.com에 로그인 (쿠키)
2. 사용자가 evil.com 방문
3. evil.com 페이지에서:
   <form action="https://example.com/transfer" method="POST">
     <input name="to" value="hacker">
     <input name="amount" value="1000000">
   </form>
   <script>document.forms[0].submit()</script>
4. 브라우저 자동으로 example.com 쿠키 첨부
5. example.com → 위조 거래 처리


→ 사용자 인지 없이 행동 수행

res.cookie('session', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict',  // 다른 사이트 요청 시 쿠키 전송 X
});


// SameSite 옵션:
// - 'strict': 다른 도메인 요청 시 쿠키 전송 안 함 (가장 안전)
// - 'lax':    GET·top-level navigation만 허용 (기본 권장)
// - 'none':   모든 요청에 전송 (CSRF 위험)


// 'lax'가 균형:
// - 외부 링크 클릭 시 로그인 유지
// - POST·iframe·XHR은 차단

import csrf from 'csurf';

app.use(csrf({ cookie: { httpOnly: true, secure: true, sameSite: 'strict' } }));


// 폼에 토큰 주입
app.get('/transfer-form', (req, res) => {
  res.render('transfer', { csrfToken: req.csrfToken() });
});


// HTML
<form method="POST" action="/transfer">
  <input type="hidden" name="_csrf" value="{{csrfToken}}">
  ...
</form>


// → POST 시 토큰 검증
// → 다른 사이트는 토큰 모름 → 거부

// 쿠키 + 헤더 양쪽에 토큰
// 다른 사이트는 쿠키 읽지 못함 → 헤더 매칭 실패


// 발급
app.post('/login', (req, res) => {
  const csrfToken = crypto.randomUUID();
  res.cookie('csrf', csrfToken, { httpOnly: false, sameSite: 'lax' });
  // ...
});


// 검증 미들웨어
app.use((req, res, next) => {
  if (['GET', 'HEAD'].includes(req.method)) return next();

  const cookieToken = req.cookies.csrf;
  const headerToken = req.headers['x-csrf-token'];

  if (!cookieToken || cookieToken !== headerToken) {
    return res.status(403).json({ error: 'csrf_failed' });
  }
  next();
});


// 클라이언트
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': getCookie('csrf'),
    'Content-Type': 'application/json',
  },
  credentials: 'include',
  body: JSON.stringify(data),
});

function checkOrigin(req: Request, res: Response, next: NextFunction) {
  const origin = req.headers.origin || req.headers.referer;
  const allowed = [
    'https://example.com',
    'https://www.example.com',
  ];

  if (req.method !== 'GET' && origin) {
    const url = new URL(origin);
    if (!allowed.includes(url.origin)) {
      return res.status(403).end();
    }
  }
  next();
}

// JWT를 Authorization 헤더로 보내면 CSRF 불가
// 브라우저가 자동으로 헤더 추가하지 않음


fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${accessToken}`,
  },
  body: JSON.stringify(data),
});


// → 다른 사이트가 헤더 추가 못 함 → CSRF 자동 방어
// → 단, accessToken이 localStorage면 XSS 위험

[1순위] Bearer Token + httpOnly Refresh Cookie
- accessToken: JS 메모리 (페이지 새로고침 시 refresh)
- refreshToken: httpOnly Secure SameSite=Strict cookie
- → CSRF 면역 + XSS 보호


[2순위] Session Cookie + CSRF Token
- session: httpOnly Secure SameSite=Lax
- csrf: 헤더로 검증
- → 전통적 + 안전

// GraphQL — 동일 정책
// POST /graphql 모든 mutation에 CSRF 보호


// tRPC — Origin 검증 + Bearer
import { createTRPCContext } from '@trpc/server';

const t = initTRPC.context<Context>().create({
  errorFormatter({ shape }) { return shape; },
});


// 미들웨어로 Origin 검증
const isFromAllowedOrigin = t.middleware(({ ctx, next }) => {
  const origin = ctx.req.headers.origin;
  if (origin && !ALLOWED_ORIGINS.includes(origin)) {
    throw new TRPCError({ code: 'FORBIDDEN' });
  }
  return next();
});

1. SameSite=None + Secure 누락 → 쿠키 전송 안 됨
2. SameSite=Strict인데 외부 링크 클릭 시 로그인 풀림
   → Lax 사용

3. CSRF 토큰을 일회용으로 → 사용자 짜증
   → 세션 단위 또는 시간 기반

4. GET 요청에 변경 동작 (security through obscurity)
   → POST/PUT/DELETE 사용 + CSRF 검증