react의 xss 방어

2 min read

React는 XSS 공격으로 부터 자유로울까?

React의 자동 이스케이프와 XSS 방어

React가 XSS를 방어해주는 것이 맞습니다

React는 CSRF가 아니라 XSS 공격을 방어하는 기능을 제공합니다:

jsx

// ✅ 안전 - React가 자동으로 이스케이프 처리
const userInput = "<script>alert('XSS')</script>";
return <div>{userInput}</div>;
// 렌더링 결과: &lt;script&gt;alert('XSS')&lt;/script&gt;
// 실제 스크립트가 실행되지 않고 텍스트로 표시됨

자동 이스케이프란?

React는 JSX 내에서 중괄호 {}로 삽입되는 값들을 자동으로 HTML 엔티티로 변환합니다:

  • < → &lt;
  • > → &gt;
  • " → &quot;
  • ' → &#x27;

이렇게 변환되면 악성 스크립트 태그가 실제 코드로 실행되지 않고 단순 텍스트로 표시됩니다.

하지만 완벽하지 않은 이유

jsx

// ❌ 위험 - dangerouslySetInnerHTML 사용 시
<div dangerouslySetInnerHTML={{__html: userInput}} />
// 이 경우 이스케이프 없이 그대로 HTML로 렌더링됨
 
// ❌ 위험 - href에 javascript: 프로토콜
<a href={userInput}>Click</a>
// userInput이 "javascript:alert('XSS')" 같은 값이면 위험
 
// ❌ 위험 - 사용자 입력을 eval()이나 Function()에 전달
eval(userInput);

Files