Html-react-parser: O html-react-parser remove o XSS?

Ótima pergunta @ dave-stevens-net!

Infelizmente, não. A razão é porque optei por tornar esta biblioteca flexível em vez de rígida.

Embora exista a opção de substituição , verificar todos os ataques possíveis pode ser demais. Em vez disso, recomendo usar um sanitizador XSS com dangerouslySetInnerHTML .

Bom saber. Obrigado pela resposta rápida.

Você é muito bem-vindo. Se isso responder à sua pergunta @ dave-stevens-net, o problema pode ser encerrado?

@ dave-stevens-net Eu posso ter falado errado antes sobre esta biblioteca não ser segura para XSS.

Originalmente, pensei que essa biblioteca não fosse segura para XSS porque dangerouslySetInnerHTML era usada aqui .

No entanto, parece que não consigo reproduzir nenhuma vulnerabilidade XSS. Veja meu violino , que se baseia neste exemplo .

Deixe-me saber se você tiver alguma sorte em reproduzir ataques XSS.

Consegui reproduzir um ataque XSS simples. Pode haver mais.

Verifique meu violino .

Encontrei aqui https://www.in-secure.org/misc/xss/xss.html

Acabei codificando um componente Sanitize usando a dependência de pacote sanitize-html .

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

Exemplo de uso:

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

@harveydf Ótimo achado! Obrigado por criar e compartilhar o violino.

Vou atualizar o README.md para observar que esta biblioteca não é segura para XSS.

Eu não queria usar sanitize-html, porque é enorme . Em vez disso, usei dompurify, é 10 vezes menor e não remove 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>')

Obrigado por compartilhar sua abordagem usando dompurify @ k1sul1!

Criei uma demonstração Repl.it com base no seu exemplo.