✅ 압박면접 대응 시리즈 20편: 프론트엔드 보안 — XSS와 CSRF의 차이 & 실무 방지 전략

✅ 압박면접 대응 시리즈 20편: 프론트엔드 보안 — XSS와 CSRF의 차이 & 실무 방지 전략

압박면접에서 “보안 이슈를 어떻게 예방하시나요?”는 흔히 들리지만,
대부분의 지원자가 표면적 정의만 외워서 바로 압박을 당하는 질문입니다.
면접관은 단순히 “XSS = 스크립트 삽입”이 아니라,
**“실제 어떤 상황에서 발생했고, 어떻게 방어했는가”**를 알고 싶어 합니다.

이번 글에서는 프론트엔드 개발자 관점에서 XSS, CSRF의 동작 원리, 차이, 방지 방법,
그리고 실무 대응 사례를 중심으로 정리했습니다.

---

📌 1. XSS (Cross Site Scripting)란?

공격자가 웹 페이지에 악성 스크립트를 삽입하여,
사용자의 브라우저에서 임의의 자바스크립트를 실행시키는 공격

✅ 예시

<input value="<script>alert('Hacked')</script>" />

• 공격자는 입력 필드를 통해 스크립트를 삽입
• 서버 또는 프론트단에서 이를 필터링하지 않으면 그대로 렌더링됨

📌 결과:
사용자 쿠키 탈취, 세션 하이재킹, 악성 리다이렉트

---

✅ XSS 유형

유형 설명 예시

Reflected XSS	URL 파라미터 등 즉시 반영	/search?q=<script>...</script>
Stored XSS	DB에 저장된 악성 스크립트	댓글, 게시글 등
DOM-based XSS	클라이언트 측 렌더링 중 발생	React innerHTML 등

---

✅ 방지 방법

• 사용자 입력값 Escape / Sanitization
• import DOMPurify from "dompurify"; const safe = DOMPurify.sanitize(userInput);
• React에서는 dangerouslySetInnerHTML 금지
• CSP(Content Security Policy) 헤더 설정
• Content-Security-Policy: default-src 'self';
• 쿠키 보안 속성 (HttpOnly, Secure) 활성화

---

📌 2. CSRF (Cross Site Request Forgery)란?

반응형

사용자가 로그인된 상태에서, 공격자가 의도치 않은 요청을 전송하도록 유도하는 공격

✅ 예시

사용자가 로그인된 쇼핑몰 사이트에 있을 때,
공격자가 아래 링크를 클릭하도록 유도함:

→ 사용자의 세션 쿠키가 자동 전송되어, 본인도 모르게 주문 취소 실행

---

✅ 방지 방법

• CSRF Token 검증
  • 서버가 HTML 렌더링 시 랜덤 토큰 발급
  • 요청 시 동일 토큰이 포함되어야 유효

  headers: { "X-CSRF-Token": token }
  

• SameSite 쿠키 속성
• Set-Cookie: session=abc123; SameSite=Strict
• Referer 검증으로 요청 출처 확인

---

📌 3. XSS vs CSRF 차이 요약

구분 XSS CSRF

공격 대상	사용자	서버 (사용자 세션)
공격 방식	스크립트 삽입	요청 위조
주요 원인	입력값 필터링 미비	인증 검증 부족
방지 핵심	Escape & CSP	Token & SameSite

---

📌 4. 실무 대응 사례

상황:
관리자 페이지에서 고객 리뷰 내용을 dangerouslySetInnerHTML로 렌더링
→ 악성 스크립트 삽입 후 다른 관리자의 세션 탈취

해결:

1. DOMPurify 적용 → 모든 HTML 입력값 Sanitizing
2. JWT 쿠키에 HttpOnly + SameSite=Strict 설정
3. CSRF Token 검증 로직 추가

📈 결과:

• 보안팀 점검 시 XSS/CSRF 취약점 “0건” 통과
• Lighthouse Security 점수 68 → 100점 달성

---

📌 5. 압박면접 예상 질문 & 답변 포인트

• ❓ Q. XSS를 100% 막을 수 있나요?
  → “사용자 입력 검증 + CSP + 보안 헤더 조합으로 ‘대부분의 케이스’를 차단할 수 있습니다.”
• ❓ Q. React 환경에서 CSRF를 어떻게 막나요?
  → “서버 발급 CSRF 토큰을 Axios 인터셉터로 자동 삽입하고, 쿠키 SameSite 설정으로 외부 요청을 차단합니다.”
• ❓ Q. 개발 중 실제 취약점을 발견한 경험이 있나요?
  → “dangerouslySetInnerHTML 사용 중 DOMPurify 미적용을 발견해,
  보안 점검 전 수정으로 서비스 지연을 방지한 경험이 있습니다.”

---

📌 6. 면접에서 활용할 한 줄 정리

“XSS는 사용자 브라우저를, CSRF는 서버 요청을 공격합니다.
React + NestJS 환경에서 DOMPurify, CSRF Token, HttpOnly Cookie 설정으로
실제 취약점을 사전 차단한 경험이 있습니다.”

---

압박면접,프론트엔드보안,XSS,CSRF,React보안,CSP,DOMPurify,JWT,SameSite,보안전략

---