Html-react-parser: Est-ce que html-react-parser supprime XSS ?

Excellente question @dave-stevens-net !

Malheureusement non. La raison en est que j'ai choisi de rendre cette bibliothèque flexible plutôt que stricte.

Bien qu'il existe l'option de remplacement , la vérification contre toutes les attaques possibles peut être trop lourde. Je recommande plutôt d'utiliser un désinfectant XSS avec dangereusementSetInnerHTML .

Bon à savoir. Merci pour la réponse rapide.

Vous êtes le bienvenu. Si cela répond à votre question @dave-stevens-net, le problème peut-il être clos ?

@dave-stevens-net J'ai peut-être mal exprimé plus tôt que cette bibliothèque n'était pas sûre pour XSS.

Au départ, je pensais que cette bibliothèque n'était pas sécurisée pour XSS car dangerouslySetInnerHTML était utilisé ici .

Cependant, il semble que je ne sois pas en mesure de reproduire les vulnérabilités XSS. Voir mon violon , qui est basé sur cet exemple .

Faites-moi savoir si vous avez de la chance de reproduire des attaques XSS.

J'ai réussi à reproduire une simple attaque XSS. Il y en a peut-être plus.

Vérifiez mon violon .

Je l'ai trouvé ici https://www.in-secure.org/misc/xss/xss.html

J'ai fini par coder un composant Sanitize en utilisant la dépendance du package 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

Exemple d'utilisation :

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

@harveydf Bonne trouvaille ! Merci d'avoir créé et partagé le violon.

Je vais mettre à jour le README.md pour noter que cette bibliothèque n'est pas sécurisée XSS.

Je ne voulais pas utiliser sanitize-html, car c'est un énorme . J'ai utilisé dompurify à la place, il est 10 fois plus petit et ne supprime pas le 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>')

Merci d'avoir partagé votre approche en utilisant dompurify @k1sul1 !

J'ai créé une démo Repl.it basée sur votre exemple.