html을 반응으로 안전하게 렌더링하는 방법

html을 반응으로 안전하게 렌더링하는 방법

텍스트 영역에서 사용자가 html 마크업을 생성했는데 화면 다른 부분에 렌더링하고 싶습니다.마크업은 컴포넌트의 소품에 문자열로 저장됩니다.

나는 명백한 이유로 위험하게 sethtml을 사용하고 싶지 않다.스크립트 태그 및 기타 비활성 html을 제거하기 위해 html을 위한 마킹된 파서가 있습니까?

sanitize-html 모듈을 사용하여 html을 삭제하고 위험하게 sanitized 문자열을 렌더링합니다.SetInnerHTML.

간단한 래퍼 컴포넌트를 생성할 수 있습니다.

const defaultOptions = {
  allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
  allowedAttributes: {
    'a': [ 'href' ]
  },
  allowedIframeHostnames: ['www.youtube.com']
};

const sanitize = (dirty, options) => ({
  __html: sanitizeHtml(
    dirty, 
    options: { ...defaultOptions, ...options }
  )
});

const SanitizeHTML = ({ html, options }) => (
  <div dangerouslySetInnerHTML={sanitize(html, options)} />
);

사용방법:

<SanitizeHTML html="<img src=x onerror=alert('img') />" />

---

react-sanitized-html의 Sanitized를 사용할 수도 있습니다.HTML 컴포넌트: 리액트 래퍼입니다.sanitize-html:

<SanitizedHTML
  allowedAttributes={{ 'a': ['href'] }}
  allowedTags={['a']}
  html={ `<a href="http://bing.com/">Bing</a>` }
/>

승인된 답변에 근거한 예:

import sanitizeHtml from 'sanitize-html';

const MyComponent = () => {
  dirty = '<a href="my-slug" target="_blank" onClick="evil()">click</a>';
  const clean = sanitizeHtml(dirty, {
    allowedTags: ['b', 'i', 'em', 'strong', 'a'],
    allowedAttributes: {
      a: ['href', 'target']
    }
  });
  return (
    <div 
      dangerouslySetInnerHTML={{__html: clean}}
    />
  );
};

MyComponent렌더링div링크를 포함하지 않고 포함onClick="evil()":

<a href="my-slug" target="_blank">click</a>

XSS 필터링의 경우 보안 담당자가 작성한 sanitize-html 대신 dompurify라는 좋은 방법이 있습니다.

https://stackoverflow.com/a/38663813/1762849 에서 DOMPurify 를 사용하면, 다음과 같이 됩니다.

const defaultOptions = {
  ALLOWED_TAGS: [ 'b', 'i', 'em', 'strong', 'a' ], 
  ALLOWED_ATTR: ['href']
};

const sanitize = (dirty, options) => ({
  __html: DOMPurify.sanitize(
    dirty, 
    { ...defaultOptions, ...options }
  )
});

const SanitizeHTML = ({ html, options }) => (
  <div dangerouslySetInnerHTML={sanitize(html, options)} />
);

사용방법:

<SanitizeHTML html="<img src=x onerror=alert('img') />" />

---

또한 클라이언트 및 서버에서 HTML을 삭제해야 할 경우 프런트엔드와 백엔드에서 DOMPurify 사용을 통합하는 isomophic-dompurify 모듈의 사용을 고려해 보십시오.

언급URL : https://stackoverflow.com/questions/38663751/how-to-safely-render-html-in-react