[TECH-QA] 리액트에서 XSS 방어

Posted 4 months Updated 4 months

By 베짱이가 되고싶은 개미。

React는 기본적으로 XSS(크로스 사이트 스크립팅) 공격을 방어하기 위한 강력한 메커니즘을 제공합니다. React의 설계 자체가 XSS 취약점을 줄이도록 만들어져 있으며, 이를 통해 사용자 입력이나 동적 데이터를 안전하게 렌더링할 수 있습니다. 하지만 특정 상황에서는 주의가 필요합니다. 아래에서 React의 XSS 방어 메커니즘과 주의사항을 정리하겠습니다.

React의 기본 XSS 방어 메커니즘

React는 JSX와 내부 렌더링 방식 덕분에 XSS 공격을 방지하는 몇 가지 기본 기능을 제공합니다.

자동 이스케이프 처리

React는 JSX에서 동적 데이터를 렌더링할 때, 기본적으로 HTML 특수 문자를 이스케이프 처리합니다. 예를 들어, <, >, & 같은 문자는 < > & 로 변환되어 텍스트로 표시됩니다.

function App() {
  const userInput = "<script>alert('XSS')</script>";
  return <div>{userInput}</div>;
}

브라우저에 가 이스케이프 처리 후 <script>alert('XSS')</script> 텍스트로 표시되며, 스크립트는 실행되지 않음. React는 {} 내부의 문자열을 textContent로 처리하여 HTML로 해석되지 않도록 합니다.

JSX의 안전한 구조

JSX는 HTML처럼 보이지만, 실제로는 JavaScript 객체로 컴파일됩니다. 따라서 사용자가 입력한 데이터가 직접 HTML로 삽입되지 않고, React가 관리하는 DOM API를 통해 안전하게 렌더링됩니다.

{userInput}는 React.createElement로 변환되어 안전하게 처리됨.

속성 이스케이프

HTML 속성(예: value, href)에 동적 데이터를 삽입할 때도 React는 특수 문자를 이스케이프하여 악성 코드(예: javascript:alert('XSS'))가 실행되지 않도록 합니다.

📝 안전하지 않은 dangerouslySetInnerHTML 사용.

스크립트 실행 가능하여 XSS 취약하다.

const userInput = "<script>alert('XSS')</script>";
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;

📝 안전한 방법 dangerouslySetInnerHTML 사용

사용자 입력을 삽입하기 전에 반드시 DOMPurify 같은 라이브러리로 정화(sanitize).

import DOMPurify from "dompurify";
const userInput = "<script>alert('XSS')</script>";
const sanitized = DOMPurify.sanitize(userInput);
return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;

React에서 XSS 방어를 강화하는 방법

React의 기본 방어에 더해 추가적인 보안 조치를 적용하면 더 안전한 애플리케이션을 만들 수 있습니다.

📝 사용자 입력 검증

클라이언트와 서버에서 입력 데이터를 검증하여 예상치 못한 형식(예: 스크립트 태그, 특수 문자)을 차단.
예: 이메일 입력은 이메일 형식이 맞는지 확인.

📝 DOMPurify 사용

DOMPurify는 입력된 HTML 문자열을 분석하고, 안전하지 않은 요소를 제거하거나 변환하여 XSS 공격을 방지합니다.

<script>alert('XSS')</script>

"" (빈 문자열,