React의 XSS: dangerouslySetInnerHTML과 서드파티 스크립트

React는 JSX로 렌더링되는 모든 값을 DOM에 삽입하기 전에 자동으로 이스케이프합니다. JSX에서 {userInput}을 작성하면 React는 textContent 할당과 동일한 방식으로 처리하므로, 해당 값은 HTML이 아닌 텍스트로 취급됩니다. 따라서 React 애플리케이션에서는 기본적으로 대부분의 XSS 공격을 방지할 수 있습니다.

dangerouslySetInnerHTML={{ __html: htmlString }}은 자동 이스케이프를 우회하는 React의 탈출구입니다. 이름부터 의도적으로 경고를 담고 있으며, HTML 문자열의 안전을 직접 책임져야 한다는 뜻입니다. React는 innerHTML을 직접 설정하므로 스크립트와 이벤트 핸들러를 포함한 모든 HTML이 실행됩니다.

리치 텍스트 편집기(TipTap 또는 Quill 등), HTML을 저장하는 CMS, 또는 Markdown을 HTML로 변환하는 변환기에서 가져온 HTML을 렌더링할 때는 dangerouslySetInnerHTML이 실제로 필요합니다. 이러한 출처는 이스케이프된 텍스트가 아니라 HTML로 렌더링해야 하는 실제 HTML 마크업을 생성합니다.

HTML 문자열에 <script>stealCookies()</script> 또는 <img src=x onerror="stealData()">가 포함되어 있다면, 이를 innerHTML로 설정하는 순간 공격자의 코드가 실행됩니다. 사용자 제공 콘텐츠를 정제 없이 dangerouslySetInnerHTML에 직접 전달하는 것은 치명적인 XSS 취약점입니다.

DOMPurify는 브라우저에서 사용하는 업계 표준 HTML 새니타이저입니다. 샌드박스 처리된 컨텍스트에서 HTML 문자열을 분석하고, 위험한 요소와 속성(스크립트 태그, 이벤트 핸들러, javascript: URL)을 제거한 뒤 안전한 HTML 문자열을 반환합니다. dangerouslySetInnerHTML에 전달하기 전에 DOMPurify.sanitize(dirtyHtml)을 사용합니다.

서드파티 스크립트(분석 도구, 채팅 위젯, 광고 네트워크)는 애플리케이션의 JavaScript와 동일한 권한으로 실행됩니다. 침해되었거나 악의적인 서드파티 스크립트는 document.cookie를 읽고, localStorage에 접근하며, 폼 입력값을 읽고, 외부 서버에 요청을 보낼 수 있습니다. 이 모든 일이 사용자에게 아무런 표시 없이 발생할 수 있습니다.

콘텐츠 보안 정책은 실행이 허용된 스크립트를 선언하는 HTTP 헤더입니다. XSS 페이로드가 DOM에 주입되더라도, 올바르게 구성된 CSP는 인라인 스크립트를 제한하고 허용 목록에 있는 스크립트 출처만 허용하여 실행을 차단할 수 있습니다. CSP는 입력 정제 다음에 적용하는 두 번째 방어선입니다.

npm 패키지는 실제 XSS 공격 경로가 될 수 있습니다. 종속 항목에 환경 변수나 사용자 데이터를 외부로 유출하는 악성 코드가 포함될 수 있습니다. 2022년의 node-ipc 사건과 2021년의 ua-parser-js 침해 사건은 널리 사용되는 패키지도 탈취되어 악성 코드가 삽입될 수 있음을 보여주었습니다. npm audit으로 종속 항목을 감사하고 잠금 파일을 사용하십시오.

XSS 공격이 성공하면 공격자는 사용자의 sessionStorage JWT 토큰을 탈취하여 공격자가 제어하는 서버로 보낼 수 있고, 인증된 사용자로서 작업을 수행할 수 있으며(사용자 세션을 사용하는 API 호출), 피싱 콘텐츠가 표시되도록 DOM을 수정하거나 사용자가 애플리케이션에서 누르는 모든 키 입력을 기록할 수 있습니다.

신뢰된 타입 브라우저 API는 모든 DOM 싱크(innerHTML, eval, script.src)가 원시 문자열이 아니라 특별한 타입 객체를 받도록 요구합니다. 이를 통해 문자열 기반 XSS 페이로드가 플랫폼 수준에서 DOM에 도달하는 것을 방지합니다. React는 신뢰된 타입과의 호환성을 지원하기 위해 작업 중이며, CSP로 이를 강제할 수 있습니다.

CMS HTML을 렌더링하는 안전한 패턴은 다음과 같습니다. HTML을 가져온 뒤 안전한 태그와 속성의 허용 목록을 사용하여 DOMPurify.sanitize()로 정제하고, dangerouslySetInnerHTML={{ __html: cleanHtml }}로 렌더링합니다. CMS를 신뢰하더라도 정제 단계를 생략하지 마십시오. CMS 데이터베이스 자체가 침해될 수 있기 때문입니다.

DOMPurify.sanitize(htmlString)을 호출하면 DOMPurify는 무엇을 합니까?

React는 JSX 값을 자동으로 이스케이프하여 대부분의 XSS를 방지합니다. dangerouslySetInnerHTML은 정당한 HTML 렌더링을 위해 이 보호를 우회하므로, 먼저 DOMPurify로 입력을 정제해야 합니다. 서드파티 스크립트와 침해된 npm 패키지는 공급망을 통한 XSS 공격 경로가 될 수 있습니다. 콘텐츠 보안 정책은 두 번째 방어 계층을 제공합니다. XSS가 성공하면 토큰 탈취, 사용자 사칭, 피싱이 가능해집니다.