Html-react-parser: Entfernt html-react-parser XSS?

Tolle Frage @dave-stevens-net!

Leider nicht. Der Grund dafür ist, dass ich mich entschieden habe, diese Bibliothek eher flexibel als streng zu gestalten.

Obwohl es die Option zum Ersetzen gibt , kann es zu viel sein, alle möglichen Angriffe zu überprüfen. Ich empfehle stattdessen die Verwendung eines XSS-Desinfektionsmittels mit gefährlichem SetInnerHTML .

Gut zu wissen. Danke für die schnelle Antwort.

Sie sind herzlich willkommen. Wenn dies Ihre Frage @dave-stevens-net beantwortet, kann das Problem geschlossen werden?

@dave-stevens-net Ich habe mich vielleicht früher falsch ausgedrückt, dass diese Bibliothek nicht XSS-sicher ist.

Ich dachte ursprünglich, diese Bibliothek sei nicht XSS-sicher, weil hier auf dangerouslySetInnerHTML vertraut wurde .

Es scheint jedoch, dass ich keine XSS-Schwachstellen reproduzieren kann. Siehe meine Geige , die auf diesem Beispiel basiert.

Lassen Sie es mich wissen, wenn Sie Glück bei der Reproduktion von XSS-Angriffen haben.

Ich habe es geschafft, einen einfachen XSS-Angriff zu reproduzieren. Es könnte mehr sein.

Überprüfen Sie meine Geige .

Ich habe es hier gefunden https://www.in-secure.org/misc/xss/xss.html

Am Ende habe ich eine Sanitize-Komponente mit der Paketabhängigkeit sanitize -html codiert.

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

Anwendungsbeispiel:

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

@harveydf Toller Fund! Danke für das Erstellen und Teilen der Geige.

Ich werde README.md aktualisieren, um zu beachten, dass diese Bibliothek nicht XSS-sicher ist.

Ich wollte sanitize-html nicht verwenden, weil es massiv ist . Ich habe stattdessen dompurify verwendet, es ist 10 mal kleiner und entfernt kein 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>')

Vielen Dank, dass Sie Ihren Ansatz mit dompurify @k1sul1 geteilt haben!

Ich habe eine Repl.it- Demo basierend auf Ihrem Beispiel erstellt.