security · high priority
웹 보안 핵심 (XSS, CSRF, CSP)
FE 개발자가 반드시 알아야 하는 보안 개념
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“신분증 위조와 비밀 도장”
XSS는 공격자가 내 입으로 직접 악의적인 말을 하게 만드는 것입니다. CSRF는 공격자가 내 손을 조종해 내가 원하지 않는 서명을 하게 만드는 것입니다. CSRF 토큰은 서버만 아는 비밀 도장으로, 진짜 내가 요청한 것인지 확인하는 수단입니다.
핵심 개념
XSS는 사용자 입력을 HTML에 그대로 삽입할 때 발생합니다. 저장형(Stored), 반사형(Reflected), DOM 기반 세 가지 유형이 있습니다. 공격자는 스크립트를 삽입해 쿠키 탈취, 세션 하이재킹, 피싱 페이지 노출 등을 시도합니다.
방어 방법: 1) 사용자 입력을 DOM에 텍스트로만 삽입 (textContent 사용). 2) HTML 삽입이 필요하면 DOMPurify로 살균 후 사용. 3) React JSX는 문자열을 자동 이스케이프하여 기본 보호 제공. 4) CSP(Content-Security-Policy) 헤더로 스크립트 실행 출처 제한.
CSP (Content Security Policy) — XSS 추가 방어선
HTTP 헤더로 스크립트 실행 출처를 제한합니다: Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com 인라인 스크립트와 외부 도메인 스크립트를 차단해 XSS가 성공해도 피해를 최소화합니다.
실무 적용
어떤 상황에서 사용하는가
금융 서비스 FE 개발 — 이체, 결제, 개인정보 수정 폼 구현
어떻게 적용하는가
모든 사용자 입력은 서버에서 검증. HTML 삽입 필요 시 DOMPurify로 살균. API 쿠키에 HttpOnly + Secure + SameSite=Lax 설정. CORS 화이트리스트 관리. CSP 헤더로 스크립트 소스 제한.
흔한 실수와 안티패턴
- 원시 HTML 삽입 시 반드시 DOMPurify로 살균 — 미확인 입력을 그대로 넣으면 XSS 취약점 발생
- localStorage에 인증 토큰 저장 시 스크립트 인젝션 공격으로 탈취 가능. HttpOnly 쿠키가 더 안전
- CORS에서 와일드카드(*) 허용 + withCredentials 조합은 브라우저가 차단. 명시적 origin 필요
면접 질문
답변 방향 힌트
XSS는 공격자 코드 실행, CSRF는 인증된 요청 위조. 각각 다른 방어 메커니즘이 필요합니다.
반드시 언급할 키워드
- XSS: 악성 스크립트 삽입 → 방어: 입력 살균, CSP, 안전한 DOM 삽입 방법 사용
- CSRF: 인증된 요청 위조 → 방어: SameSite 쿠키, CSRF 토큰
- React JSX는 기본적으로 문자열을 이스케이프하여 XSS 방어
- HttpOnly 쿠키로 스크립트 인젝션을 통한 쿠키 탈취 방지
예상 꼬리 질문
- localStorage와 HttpOnly 쿠키 중 어디에 인증 토큰을 저장해야 하나요?
- CSP를 적용할 때 인라인 스크립트가 필요하면 어떻게 처리하나요?