프론트엔드 개발자와 이야기하다가 React는 기본적으로 XSS 공격을 막아준다는 말을 들었다. 이게 과연 어디까지 맞는 이야기일까?
결론부터 말하면
- JSX 안에서 텍스트 형태로 렌더링할 때는 React가 자동으로 XSS를 방어해준다.
- 하지만 HTML을 직접 삽입(dangerouslySetInnerHTML) 하거나, 외부 데이터를 그대로 노출할 경우는 개발자가 직접 XSS를 방어해야 한다.
React가 자동으로 XSS를 방어해주는 경우
상황: JSX 안에서 문자열을 렌더링할 때
const userInput = '<img src=x onerror=alert("XSS") />';
return <div>{userInput}</div>;-
위 코드에서
userInput은 HTML로 인식되지 않고 그냥 텍스트로 표시됨. -
React는 내부적으로
textContent방식으로 DOM에 넣어주기 때문에,<,>,&,",'등을 자동으로 이스케이프(escape) 처리해준다.
-
이로 인해
<img>나onerror속성은 작동하지 않음.
즉, JSX 내부에서는 기본적으로 안전하다.
React가 XSS 방어를 안 해주는 경우
1. dangerouslySetInnerHTML 사용 시
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;- 이름처럼 위험하게 직접 HTML 삽입을 하기 때문에,
- 여기에 사용자 입력이나 외부 데이터를 넣으면 XSS 공격에 노출될 수 있다.
✔️ 반드시 DOMPurify 같은 라이브러리로 sanitize(정화) 처리해야 함.
2. 외부 API 데이터가 HTML로 구성되어 있을 경우
- 외부에서 받은 댓글, 게시글 내용이 HTML 형식일 때 이를 그대로
dangerouslySetInnerHTML로 렌더링하면 위험함 - 서버에서 필터링하거나, 클라이언트에서 sanitize 처리 필수
DOMPurify로 안전하게 HTML 렌더링하기 (예시)
import DOMPurify from 'dompurify';
const rawHtml = '<img src=x onerror=alert("XSS") />';
const safeHtml = DOMPurify.sanitize(rawHtml);
return <div dangerouslySetInnerHTML={{ __html: safeHtml }} />;정리
- React는 JSX 안에서의 문자열 출력은 자동으로 안전하게 처리해준다.
- 하지만 HTML을 직접 삽입하거나 외부 데이터를 렌더링할 때는 개발자가 반드시 보안 처리를 해줘야 한다.
- 무조건 React가 다 막아준다는 생각은 위험하며, 보안 의식을 갖고 예외 상황을 판단하는 게 중요하다.
기록하자