웹 애플리케이션의 가장 흔한 두 가지 보안 취약점과 방어 전략을 학습합니다.
XSS는 악성 스크립트를 삽입하여 사용자의 데이터를 탈취하고, CSRF는 인증된 사용자의 권한으로 위조된 요청을 보냅니다. 이스케이프, CSRF 토큰, CSP 헤더 등 다층 방어가 필수적입니다. React는 JSX에서 자동 이스케이프를 제공하지만 dangerouslySetInnerHTML 사용 시 주의가 필요합니다.
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 }} />;실제 코드로 동작 원리를 확인하세요.
// 1. 입력 이스케이프 함수
function escapeHtml(str: string): string {
const map: Record<string, string> = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
};
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=StrictescapeHtml) 2) React의 자동 이스케이프 활용 3) dangerouslySetInnerHTML 사용 시 DOMPurify로 정제 4) CSP 헤더 설정 5) HttpOnly 쿠키로 JS 접근 차단SameSite=Strict 쿠키 — cross-origin 요청에 쿠키 미전송 3) Origin/Referer 헤더 검증 4) Custom 헤더 요구Content-Security-Policy 헤더로 스크립트, 스타일, 이미지 등 각 리소스 유형별 허용 출처를 지정합니다. 인라인 스크립트를 차단하여 XSS를 근본적으로 방지하며, nonce 또는 hash기반으로 특정 스크립트만 허용할 수 있습니다. Content-Security-Policy-Report-Only로 먼저 테스트한 후 점진적으로 적용하는 것이 권장됩니다.