크로스 사이트 스크립팅 (XSS)

Cross-site Scripting (XSS)

설명

React 환경에서 react-markdown 라이브러리를 사용할 때, allowDangerousHtml 옵션을 켜거나 escapeHtml을 false로 설정하거나, transformLinkUri나 transformImageUri를 부적절하게 설정할 경우, 외부 입력값이 검증 없이 HTML로 렌더링되어 XSS(크로스 사이트 스크립팅) 공격에 노출될 수 있습니다. 공격자는 악의적인 스크립트를 삽입해 사용자 세션 탈취, 정보 노출, 악성 코드 실행 등을 유발할 수 있습니다.

잠재적 영향

• 사용자 정보 탈취: 공격자가 사용자의 쿠키, 세션, 또는 기타 민감 정보를 획득할 수 있습니다.

• 악성 스크립트 실행: 사용자의 브라우저에서 악성 코드가 실행되어 추가적인 공격이 이뤄질 수 있습니다.

• 사이트 신뢰도 하락: 악성 코드로 인해 사용자가 사이트를 신뢰하지 않게 됩니다.

해결 방법

• allowDangerousHtml 옵션을 사용하지 않고, 기본적으로 HTML을 escape 처리하세요.

• escapeHtml을 true로 반드시 설정하세요.

• 사용자 입력(markdown 및 렌더링되는 데이터)에 추가적인 검증과 필터링을 적용하세요.

• transformLinkUri와 transformImageUri 함수를 직접 오버라이드할 경우엔 반드시 안전하게 처리하여 XSS 벡터를 차단하세요.

취약한 코드 및 안전한 코드 예시

취약한 코드

import ReactMarkdown from "react-markdown";

function UnsafeComponent({ markdown }) {
  // XSS 공격에 취약한 설정
  return <ReactMarkdown allowDangerousHtml children={markdown} />;
}

안전한 코드

import ReactMarkdown from "react-markdown";

function SafeComponent({ markdown }) {
  // 안전한 기본 설정 사용 (HTML escape 처리)
  return <ReactMarkdown escapeHtml={true} children={markdown} />;
}

설명:

• 취약한 코드: allowDangerousHtml 옵션을 true로 사용하면 렌더링되는 HTML에 사용자 입력이 그대로 반영되어 악의적인 스크립트가 실행될 수 있습니다.

• 안전한 코드: escapeHtml={true} 옵션을 사용하면 사용자 입력이 모두 이스케이프(escape) 처리되어 브라우저에서 악성 스크립트가 실행되지 못하도록 막아줍니다.

참조

• CWE-79