위험하게 SetInner를 대체하는 안전한 방법HTML

위험하게 SetInner를 대체하는 안전한 방법HTML

사이트(React 사용)에 다이내믹한 블로그를 만들고 싶습니다.처음에는 투고를 데이터베이스에 raw HTML로 저장하고 위험하게 SetInner를 사용하여 콘텐츠를 생성하려고 했습니다.HTML입니다. 하지만 보안에 대한 영향이 우려됩니다.내 앱에는 기밀 데이터가 없지만, 나는 XSS에 대해 잘 알지 못해 내 앱이 어떤 위험에 노출될지 알지 못한다.

내 앱에 블로그 페이지를 동적으로 로드할 수 있는 성능적이고 안전한 방법이 있는지 궁금합니다.이 경우 https://github.com/odysseyscience/react-router-proxy-loader을 사용하는 것이 도움이 될까요?블로그 투고 JSX 폴더를 다른 앱과 분리하여 로드합니다(부탁드립니다만, react-router-proxy-loader가 어떻게 동작하는지는 잘 모르겠습니다.

저는 제안을 기꺼이 받아들입니다.

XSS가 주요 관심사인 경우 를 사용하여 HTML을 삭제한 후 DOM에 삽입할 수 있습니다.dangerouslySetInnerHTML10K로 줄인 거예요.노드에서도 동작합니다.

기사 "위험하게 SetInner 사용 시 XSS 공격을 방지하는 방법"리액트의 HTML에서는 jam3/no-sanitizer-with-danger eslint 규칙을 사용하여 콘텐츠가 위험하게 전달되었는지 확인할 것을 권장합니다.SetInnerHTML이 이 검사기 함수로 래핑됩니다.

유효한 코드의 예는 다음과 같습니다.

const sanitizer = dompurify.sanitize;
return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />; // Good

, 음3 izer3 izer3 izer3 izer izer3 izerizer izer it it it it it it it it it it it it it3 ::3: 。
DOMPurify
XSS.
xss-displict.

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

"소품 이름이 위험하게 Set InnerHTML은 의도적으로 무서운 것으로 선택되었다."

"보안상의 영향을 충분히 이해하고 데이터를 적절히 삭제한 후,."

한 CMS하지 않는 것)를는, 「/」(이 순서도 를 사용해 할 수 .dangerouslySetInnerHTML.

Morhaus가 말한 것처럼 DOMPurify를 사용하면 (bonus가) 이 불행한 비트를 처리할 수 있습니다: "따라서 제공된 HTML은 올바른 형식(즉 XML 검증 통과)이어야 합니다."그렇지 않으면 HTML5의 XML 버전이 아닌 콘텐츠를 사용하는 것이 문제가 될 수 있습니다.(주의: 저도 당신처럼 처음이라 아직 사용하지 않았습니다.)

다른 답변에서 설명한 바와 같이 많은 라이브러리(dompurify, xss 등)는 브라우저에 제공하는 HTML을 해석하여 악의적인 부분을 제거하고 안전하게 표시할 수 있습니다.

문제는 이러한 라이브러리를 어떻게 사용하는가 하는 것입니다.

이를 위해 RisXSS를 설치할 수 있습니다.RisXSS는 ESLint 플러그인으로서dangerouslySetInnerHTML (어떤 의미에서 이것은 의 개량판입니다)react/no-dangerESLint （ 。

위해서는 , 「 」 「 」 「 」 「 」를 인스톨 합니다.dompurify ★★★★★★★★★★★★★★★★★」eslint-plugin-risxss:

npm install dompurify eslint-plugin-risxss

risxssESLint DOMPurify 。

import { sanitize } from 'dompurify';

export const MyArticle = ({ post }) => (
  <>
    <div dangerouslySetInnerHTML={{ post.content }} /> {/* You will receive a warning */}
    <div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} /> {/* All good here */}
  </>
);

면책사항:저는 RisXSS 플러그인의 기고자입니다.

입력 HTML은 안전하지만(XSS 위험 없음) 잘못된 형식(예: 임의 형식 있음)일 수 있습니다.<예기치 않은 DOM 변경으로 인해 앱이 실패하는 것을 방지하려면 다음과 같이 하십시오.

function sanitize(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return doc.innerHTML;
}

^{(https://stackoverflow.com/a/14216406/115493) 기반)}

그러나 HTML이 XSS에 안전하지 않은지 조금이라도 의심스럽다면 위와 같이 DOMPurify를 사용하십시오.

리액트 라이브러리 인터위브를 사용합니다.

1. 위험한 SetInner를 사용하지 않고 HTML을 안전하게 렌더링HTML.
2. HTML 태그를 안전하게 제거합니다.
3. 자동 XSS 및 주입 보호.
4. 필터를 사용하여 HTML Atribut을 클릭합니다.
5. 매처를 사용하여 구성 요소를 보간합니다.를 사용하여 구성요소를 보간합니다.
6. URL, IP, 이메일 및 해시태그 자동링크
7. 이모티콘 및 이모티콘 문자를 렌더링합니다.

https://www.npmjs.com/package/interweave

위험하게 SetInner를 대체하는 안전한 방법HTML

내 앱에 블로그 페이지를 동적으로 로드할 수 있는 성능적이고 안전한 방법이 있는지 궁금합니다.

로운 점은, 이 은 ''에 인데,dangerouselySetInnerHTML 다 하고 있어요 , 모모모 , , 、택의의는는는는는?아 、 그 、 쉬 、 쉬 、 냥 、 야야 。

대안 1: 컴포넌트에 데이터를 전달하도록 앱을 다시 작성합니다.

처음에는 투고를 raw HTML로 저장하려고 했습니다.

이것은 필수 사항인 것처럼 보이지 않습니다.컴포넌트와 일치하는 데이터 스키마를 걱정할 필요가 없는 간단한 솔루션으로 구현될 수 있습니다.하지만 이것이 어려운 요구사항은 아닐 것이다.

raw HTML 저장에 의존하지 않도록 앱을 재설계할 수 있지만 앱에 따라서는 많은 작업이 필요할 수 있습니다.

대안 2: 자신의 페이지 빌더를 작성하지 마십시오.

만약 당신이 단지 당신의 사이트에 블로그를 개설하는 것에 관심이 있다면, 당신 자신의 페이지 빌더를 쓰는 것은 가치가 없을지도 모른다.사이트의 다른 부분과의 긴밀한 통합을 원하더라도 WordPress와 같은 기능을 사용하면 가능합니다.

대체 3(WordPress만):사용

현재 사용 중인 경우dangerouselySetInnerHTMLWordPress 블록에서 변환하여InnerBlocks대신.

저도 같은 문제에 직면했고 더 나은 해결책으로 끝났습니다.다음과 같은 입력과 솔루션이 도움이 되는 경우lodash

<em>paragraph text example:</em>

마이솔루션:

import _ from 'lodash';

const createMarkup = encodedHtml => ({
  __html: _.unescape(encodedHtml),
});

/* eslint-disable react/no-danger */
const Notes = ({ label }) => (
  <div>
    <div dangerouslySetInnerHTML={createMarkup(label)} />
  </div>
);

dompurify를 사용할 때 조건(이 경우는 프런트엔드 프로젝트에 있음)이 단순한 코드인 경우 추가해야 합니다.

import DOMPurify from 'dompurify'
if (typeof window !== `undefined`) {
    const domPurify = DOMPurify(window);
    title = domPurify.sanitize(title);
}

언급URL : https://stackoverflow.com/questions/29044518/safe-alternative-to-dangerouslysetinnerhtml