Html-react-parser: html-react-parser가 XSS를 제거합니까?

좋은 질문 @dave-stevens-net!

불행히도 그렇지 않습니다. 그 이유는 이 라이브러리를 엄격하지 않고 유연하게 만들기로 선택했기 때문입니다.

교체 옵션이 있지만 가능한 모든 공격에 대해 검사하는 것은 너무 많을 수 있습니다. 대신 위험하게 SetInnerHTML 과 함께 XSS 새니타이저를 사용하는 것이 좋습니다.

알아 둘만 한. 빠른 응답에 감사합니다.

당신은 매우 환영합니다. 이것이 @dave-stevens-net 질문에 대한 답변이라면 문제를 종결할 수 있습니까?

@dave-stevens-net 나는 이 라이브러리가 XSS에 안전하지 않다는 것에 대해 일찍이 말을 잘못했을 수 있습니다.

나는 원래 dangerouslySetInnerHTML 이 여기 에 의존했기 때문에 이 라이브러리가 XSS-안전하지 않다고 생각했습니다.

그러나 XSS 취약점을 재현할 수 없는 것 같습니다. 이 예제를 기반으로 하는 내 바이올린을 참조하십시오.

XSS 공격을 재현하는 데 운이 있다면 알려주십시오.

간단한 XSS 공격을 재현하는 데 성공했습니다. 더 있을 수 있습니다.

내 바이올린을 확인하십시오.

https://www.in-secure.org/misc/xss/xss.html 에서 찾았습니다.

Sanitize -html 패키지 종속성을 사용하여 Sanitize 구성 요소를 코딩했습니다.

import React from 'react'
import sanitizeHtml from 'sanitize-html'

const Sanitize = ({ html }) => {
    const clean = sanitizeHtml(html, {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'span']),
        allowedAttributes: {
           ...
        },
    })
    return (
        <span
            className="sanitized-html"
            dangerouslySetInnerHTML={{ __html: clean }}
        />
    )
}
export default Sanitize

사용 예:

<Sanitize html={data.wordpressPage.title} />

@harveydf 좋은 발견! 바이올린을 만들고 공유해 주셔서 감사합니다.

README.md 를 업데이트하여 이 라이브러리가 XSS에 안전하지 않다는 점에 유의하겠습니다.

대용량이기 때문에 Sanitize-html을 사용하고 싶지 않았습니다. 대신 dompurify를 사용했는데 10배 더 작고 CSS를 제거하지 않습니다.

import parse, { domToReact } from 'html-react-parser'
import DOMPurify from 'dompurify'
import React from 'react'

// export function replaceNode() {}

export default function html(html, opts = {}) {
  return parse(DOMPurify.sanitize(html), {
    ...{
      replace: replaceNode,
    },
    ...opts,
  })
}

html('<iframe src=javascript:alert("xss")></iframe>')

dompurify @k1sul1을 사용하여 접근 방식을 공유해 주셔서 감사합니다!

귀하의 예를 기반으로 Repl.it 데모를 만들었습니다.