Html-react-parser: ¿Html-react-parser elimina XSS?

¡Gran pregunta @ dave-stevens-net!

Desafortunadamente no es así. La razón es porque elegí hacer que esta biblioteca sea flexible en lugar de estricta.

Aunque existe la opción de reemplazo , verificar todos los posibles ataques puede ser demasiado. En su lugar, recomiendo usar un desinfectante XSS con dangerouslySetInnerHTML .

Bueno saber. Gracias por la rápida respuesta.

Eres muy bienvenido. Si esto responde a su pregunta @ dave-stevens-net, ¿se puede cerrar el problema?

@ dave-stevens-net Es posible que me haya equivocado antes acerca de que esta biblioteca no es segura para XSS.

Originalmente pensé que esta biblioteca no era segura para XSS porque aquí se confiaba dangerouslySetInnerHTML .

Sin embargo, parece que no puedo reproducir ninguna vulnerabilidad XSS. Vea mi violín , que se basa en este ejemplo .

Avísame si tienes suerte en la reproducción de ataques XSS.

Me las arreglé para reproducir un simple ataque XSS. Puede que haya más.

Mira mi violín .

Lo encontré aquí https://www.in-secure.org/misc/xss/xss.html

Terminé codificando un componente Sanitize usando la dependencia del paquete 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

Uso de ejemplo:

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

@harveydf ¡ Gran descubrimiento! Gracias por crear y compartir el violín.

Actualizaré README.md para tener en cuenta que esta biblioteca no es segura para XSS.

No quería usar sanitize-html, porque es enorme . En su lugar, usé dompurify, es 10 veces más pequeño y no elimina 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>')

¡Gracias por compartir su enfoque usando dompurify @ k1sul1!

Creé una demostración de