XSS 공격이란 무엇이며, 프론트엔드에서 이를 방어하기 위한 방법을 설명해주세요.
분야: 프론트엔드
XSS(Cross-Site Scripting)는 공격자가 신뢰할 수 있는 웹사이트에 악성 스크립트를 삽입하여 사용자 브라우저에서 실행되게 하는 공격입니다. 이를 통해 쿠키 탈취, 세션 하이재킹, 피싱 등이 가능합니다.
XSS 공격은 크게 세 가지 유형이 있습니다.
첫번째로 저장형(Stored) XSS입니다. 악성 스크립트가 서버에 저장되어 다른 사용자가 해당 페이지를 방문할 때 실행됩니다.
두번째는 반사형(Reflected) XSS입니다. URL 파라미터 등을 통해 전달된 악성 스크립트가 서버 응답에 포함되어 실행됩니다.
마지막으로 DOM 기반 XSS입니다. 클라이언트 측 스크립트가 DOM을 동적으로 조작할 때 발생합니다.
해결 방법
이러한 보안문제를 해결하기 위한 방법으로는 입력 검증과 출력 이스케이핑이 있습니다. 사용자 입력을 적절히 검증하고, HTML 출력 시 특수 문자를 이스케이프 처리합니다.
아래처럼 element.innerHTML 대신 element.textContent를 이용하거나, DOMPurify를 사용하여 사용자의 입력값에 대해서 특수 문자와 입력 검증을 해줄 수 있습니다.
// ❌ 잘못된 방법
element.innerHTML = userInput;
// ✅ 올바른 방법
element.textContent = userInput; // 자동 이스케이프
// ✅ HTML이 필요한 경우 DOMPurify 사용
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);
혹은, 메타 태그에 Content-Security-Policy(CSP)를 설정하여 브라우저에 실행을 허용할 컨텐츠 소스를 제한할 수 있습니다.
<!-- HTTP 헤더 또는 메타 태그로 설정 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">
마지막으로는 HttpOnly 쿠키입니다. 쿠키에 HttpOnly 플래그를 설정하여 자바스크립트를 통한 접근을 차단할 수 있습니다.