🛡️ 웹 보안 기초 (XSS & CSRF)

가장 흔한 웹 취약점의 원리를 이해하고 프론트엔드 관점에서 방어하는 방법을 학습해보세요

Cross-Site Scripting 공격의 원리와 방어법

💉 XSS (Cross-Site Scripting) 공격 이해하기

XSS는 공격자가 웹 페이지에 악성 스크립트를 삽입하는 공격입니다. 사용자의 브라우저에서 악성 코드가 실행되어 쿠키 탈취, 세션 하이재킹, 피싱 등의 피해를 입힐 수 있습니다.

🛡️ XSS 방어 방법

✓
입력값 검증 및 이스케이프:
모든 사용자 입력은 화이트리스트 기반으로 검증하고, HTML 엔티티로 이스케이프 처리합니다. React의 경우 기본적으로 XSS 방어가 되어 있지만, dangerouslySetInnerHTML 사용 시 주의가 필요합니다.
✓
CSP (Content Security Policy) 설정:
CSP 헤더를 통해 실행 가능한 스크립트의 출처를 제한합니다. 인라인 스크립트를 차단하고 신뢰할 수 있는 도메인의 스크립트만 허용하세요.
✓
HttpOnly 쿠키 사용:
세션 쿠키에 HttpOnly 플래그를 설정하여 JavaScript로 쿠키에 접근하는 것을 차단합니다.
✓
DOM 기반 XSS 방지:
innerHTML 대신 textContent 사용, URL 파라미터 처리 시 주의, eval() 함수 사용 금지 등의 안전한 코딩 관행을 따릅니다.

안전한 코드 예제

// ❌ 위험한 코드
element.innerHTML = userInput; // XSS 취약점!
document.write(userInput);     // XSS 취약점!

// ✅ 안전한 코드
element.textContent = userInput; // 텍스트로만 삽입

// React에서의 안전한 처리
function SafeComponent({ userContent }) {
  return <div>{userContent}</div>; // React가 자동으로 이스케이프
}

// HTML 이스케이프 함수
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

반사형 XSS

URL 파라미터나 폼 입력을 통해 즉시 실행되는 공격. 주로 피싱 링크를 통해 전파됩니다.

저장형 XSS

데이터베이스에 악성 스크립트가 저장되어 다른 사용자에게도 영향을 미치는 가장 위험한 유형.

DOM 기반 XSS

클라이언트 측 JavaScript에서 DOM을 조작할 때 발생하는 공격. SPA에서 특히 주의해야 합니다.

🔐 웹 보안 체크리스트

프론트엔드 보안

✓ 사용자 입력은 항상 이스케이프 처리
✓ innerHTML 대신 textContent 사용
✓ 외부 스크립트는 integrity 속성 추가
✓ 민감한 정보는 클라이언트에 저장하지 않기

백엔드 협업

✓ HTTPS 사용 필수
✓ 적절한 CORS 정책 설정
✓ 보안 헤더 구성 확인
✓ API 인증 및 권한 검증

🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그•Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.