XSS dans React : dangerouslySetInnerHTML et scripts tiers

React échappe automatiquement toutes les valeurs rendues via JSX avant de les insérer dans le DOM. Lorsque vous écrivez {userInput} en JSX, React effectue l’équivalent d’une affectation à textContent : la valeur est traitée comme du texte, jamais comme du HTML. Cela empêche par défaut la majorité des attaques XSS dans les applications React.

dangerouslySetInnerHTML={{ __html: htmlString }} est le mécanisme de contournement de React qui désactive l’échappement automatique. Son nom est volontairement alarmant : il vous indique que vous êtes responsable de la sécurité de la chaîne HTML. React définit directement innerHTML, en interprétant tout le HTML, y compris les scripts et les gestionnaires d’événements.

Vous avez réellement besoin de dangerouslySetInnerHTML lorsque vous rendez du HTML provenant d’un éditeur de texte enrichi (comme TipTap ou Quill), d’un CMS qui stocke du HTML ou d’un convertisseur Markdown vers HTML. Ces sources produisent un véritable balisage HTML qui doit être rendu comme du HTML, et non comme du texte échappé.

Si la chaîne HTML contient <script>stealCookies()</script> ou <img src=x onerror="stealData()">, l’affecter à innerHTML exécute le code de l’attaquant. Tout contenu fourni par un utilisateur et transmis directement à dangerouslySetInnerHTML sans assainissement constitue une vulnérabilité XSS critique.

DOMPurify est l’assainisseur HTML standard du secteur pour les navigateurs. Il analyse la chaîne HTML dans un contexte isolé, supprime les éléments et attributs dangereux (balises de script, gestionnaires d’événements, URL javascript:) et renvoie une chaîne HTML sûre. Utilisation : DOMPurify.sanitize(dirtyHtml) avant de la transmettre à dangerouslySetInnerHTML.

Les scripts tiers (outils d’analyse, widgets de discussion, réseaux publicitaires) disposent des mêmes autorisations que le JavaScript de votre application. Un script tiers compromis ou malveillant peut lire document.cookie, accéder à localStorage, lire les champs de formulaire et envoyer des requêtes à des serveurs externes, sans que l’utilisateur en soit informé.

La politique de sécurité du contenu est un en-tête HTTP qui indique quels scripts sont autorisés à s’exécuter. Même si une charge utile XSS est injectée dans le DOM, une CSP correctement configurée peut bloquer son exécution en restreignant les scripts intégrés et en autorisant uniquement les sources de scripts figurant dans une liste d’autorisation. La CSP constitue la deuxième ligne de défense après l’assainissement des entrées.

Les paquets npm constituent un véritable vecteur d’attaque XSS. Une dépendance peut contenir du code malveillant qui exfiltre des variables d’environnement ou des données utilisateur. L’incident node-ipc de 2022 et la compromission de ua-parser-js en 2021 ont montré que des paquets largement utilisés peuvent être détournés et contaminés. Auditez vos dépendances avec npm audit et utilisez des fichiers de verrouillage.

Une attaque XSS réussie permet à un attaquant de voler le jeton JWT de l’utilisateur stocké dans sessionStorage (en l’envoyant à un serveur contrôlé par l’attaquant), d’agir au nom de l’utilisateur authentifié (en effectuant des appels d’API avec sa session), de modifier le DOM pour afficher du contenu d’hameçonnage ou d’enregistrer chaque touche frappée par l’utilisateur dans l’application.

L’API Trusted Types du navigateur exige que tous les points d’insertion du DOM (innerHTML, eval, script.src) reçoivent des objets typés spéciaux plutôt que des chaînes brutes. Cela empêche les charges utiles XSS fondées sur des chaînes d’atteindre le DOM au niveau de la plateforme. React travaille à la compatibilité avec Trusted Types, et la CSP peut l’imposer.

Le modèle sûr pour rendre du HTML provenant d’un CMS consiste à récupérer le HTML, à le faire passer par DOMPurify.sanitize() avec une liste d’autorisation de balises et d’attributs sûrs, puis à le rendre avec dangerouslySetInnerHTML={{ __html: cleanHtml }}. Ne sautez jamais l’étape d’assainissement, même si vous faites confiance au CMS, car la base de données du CMS elle-même pourrait être compromise.

Que fait DOMPurify lorsque vous appelez DOMPurify.sanitize(htmlString) ?

React échappe automatiquement les valeurs JSX, ce qui empêche la plupart des attaques XSS. dangerouslySetInnerHTML contourne cette protection pour permettre un rendu HTML légitime : assainissez toujours l’entrée avec DOMPurify au préalable. Les scripts tiers et les paquets npm compromis sont des vecteurs XSS liés à la chaîne d’approvisionnement. La politique de sécurité du contenu fournit une deuxième couche de défense. Une attaque XSS réussie permet le vol de jetons, l’usurpation d’identité et l’hameçonnage.