01 · Concept

XSS / CSRF 방지

웹 애플리케이션의 가장 흔한 두 가지 보안 취약점과 방어 전략을 학습합니다.

XSS는 악성 스크립트를 삽입하여 사용자의 데이터를 탈취하고, CSRF는 인증된 사용자의 권한으로 위조된 요청을 보냅니다. 이스케이프, CSRF 토큰, CSP 헤더 등 다층 방어가 필수적입니다. React는 JSX에서 자동 이스케이프를 제공하지만 dangerouslySetInnerHTML 사용 시 주의가 필요합니다.

02 · Interactive Demo

보안 공격 / 방어 시각화

XSS, CSRF 공격 흐름을 시뮬레이션하고, 방어 전략을 확인하세요.

// ❌ 취약한 코드
element.innerHTML = userInput;
// userInput = '<img src=x onerror="steal(document.cookie)">'

// ✅ 안전한 코드
element.textContent = userInput;  // 자동 이스케이프

// React는 기본적으로 XSS 방지
return <div>{userInput}</div>;  // 자동 이스케이프
// ❌ 위험: dangerouslySetInnerHTML 사용 시 주의
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;
Attack Flow
1. 악성 입력
공격자가 <script> 태그를 입력 필드에 삽입
2. 저장/반영
서버가 이스케이프 없이 저장 또는 반영
3. 실행
피해자 브라우저에서 스크립트 실행
4. 탈취
쿠키, 세션, 개인정보 탈취
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// 1. 입력 이스케이프 함수
function escapeHtml(str: string): string {
  const map: Record<string, string> = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#x27;',
  };
  return str.replace(/[&<>"']/g, (c) => map[c]);
}

// 2. React는 JSX에서 자동 이스케이프
function SafeComponent({ userInput }: { userInput: string }) {
  // ✅ 안전: React가 자동 이스케이프
  return <div>{userInput}</div>;
}

// 3. DOMPurify로 HTML 정제 (필요 시)
import DOMPurify from 'dompurify';

function RichContent({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
    ALLOWED_ATTR: ['href'],
  });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

// 4. HttpOnly 쿠키 설정 (서버)
// Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict
04 · Interview Point

면접 핵심 질문

XSS는 공격자가 웹 페이지에 악성 스크립트를 삽입하여 다른 사용자의 브라우저에서 실행시키는 공격입니다. Stored XSS(DB 저장), Reflected XSS(URL 파라미터 반영), DOM-based XSS(클라이언트 DOM 조작)로 분류됩니다.

방지:
  1. 입력값 이스케이프(escapeHtml)
  2. React의 자동 이스케이프 활용
  3. dangerouslySetInnerHTML 사용 시 DOMPurify로 정제
  4. CSP 헤더 설정
  5. HttpOnly 쿠키로 JS 접근 차단
CSRF는 인증된 사용자의 브라우저를 이용해 의도하지 않은 요청을 위조하는 공격입니다. 사용자가 로그인된 상태에서 악성 사이트를 방문하면, 브라우저가 자동으로 쿠키를 첨부하여 요청을 전송합니다.

방지:
  1. CSRF 토큰 — 폼마다 고유 토큰 발급 후 서버에서 검증
  2. SameSite=Strict 쿠키 — cross-origin 요청에 쿠키 미전송
  3. Origin/Referer 헤더 검증
  4. Custom 헤더 요구
CSP는 브라우저에게 허용된 리소스 출처를 알려주는 HTTP 헤더입니다. Content-Security-Policy 헤더로 스크립트, 스타일, 이미지 등 각 리소스 유형별 허용 출처를 지정합니다. 인라인 스크립트를 차단하여 XSS를 근본적으로 방지하며, nonce 또는 hash기반으로 특정 스크립트만 허용할 수 있습니다. Content-Security-Policy-Report-Only로 먼저 테스트한 후 점진적으로 적용하는 것이 권장됩니다.