대규모 커뮤니티의 동적 SSR과 CSRF 방어 — 실시간 웹 아키텍처와 웹 보안

<!-- 1. 본문 목록: 서버가 DB에서 꺼내 즉시 완성 (Dynamic SSR) -->
<tr class="ub-content" data-no="93459">
    <td class="gall_num">93459</td>
    <td class="gall_tit">알뜰폰 요금제 비교 가이드</td>
    <td class="gall_writer">통신전문가</td>
    <td class="gall_count">312</td>
</tr>

<!-- 2. 실시간 순위: 일단 빈 상자로 내려보내고 로딩 속도 극대화 -->
<div id="rank_box"><!-- 화면이 뜬 후 JS가 비동기(fetch)로 채움 --></div>

<!-- 3. 실시간 보안 일회용 토큰: 새로고침마다 난수가 바뀜 -->
<input type="hidden" name="ci_t" value="a8f9c10d3e2b74fa..." />

<!-- 피해자가 이 페이지에 접속하는 순간 몰래 target.com으로 글 작성 POST 전송 -->
<form id="hackForm" action="https://target.com/board/write" method="POST" style="display:none;">
  <input type="hidden" name="title" value="해킹당한 계정입니다." />
  <input type="hidden" name="content" value="광고 링크 https://..." />
</form>

<script>
  // 접속 즉시 자동 실행 (피해자의 로그인 세션 쿠키가 브라우저에 의해 자동 동봉됨)
  document.getElementById('hackForm').submit();
</script>

// 서버 미들웨어: 상태 변경 요청(POST)이 들어왔을 때
function verifyCsrfToken(req, res, next) {
  const clientToken = req.body.ci_t;
  const sessionToken = req.session.csrf_token;

  // 공격자의 요청에는 일회용 토큰이 없거나 불일치함
  if (!clientToken || clientToken !== sessionToken) {
    return res.status(403).json({ error: 'CSRF 검증 실패: 유효하지 않은 요청입니다.' });
  }

  // 사용 후 즉시 토큰 폐기 또는 재발급
  next();
}