JSX et la prévention des injections (XSS)

Découvrez comment JSX, par son mécanisme d'échappement par défaut, protège vos applications React contre les attaques par injection de script (XSS).

Le risque des injections de script (XSS)

Avant d'aborder la protection offerte par JSX, rappelons brièvement ce qu'est une attaque par injection de script, ou Cross-Site Scripting (XSS). Il s'agit d'une vulnérabilité de sécurité courante dans les applications web qui permet à un attaquant d'injecter du code malveillant (généralement du JavaScript côté client) dans une page web consultée par d'autres utilisateurs. Ce script peut alors être exécuté dans le contexte du navigateur de la victime, potentiellement pour voler des informations sensibles (comme les cookies de session), rediriger l'utilisateur vers des sites malveillants, ou modifier le contenu de la page.

Une source fréquente d'injection XSS est l'affichage direct de contenu fourni par l'utilisateur (par exemple, des commentaires, des messages, des profils utilisateur) sans une validation ou un échappement appropriés. Si l'entrée utilisateur contient des balises `'; function AfficherCommentaire() { return (

Commentaire :

{commentaireMalveillant}

{ /* JSX échappe le contenu ici */}

); } // Rendu dans le DOM (simplifié) : //

Commentaire :

Ceci est un commentaire inoffensif. <script>alert("XSS!");</script>

Dans cet exemple, React ne va pas exécuter le code `alert("XSS!")`. Au lieu de cela, il va convertir les caractères spéciaux des balises `` comme du texte dans le paragraphe, sans l'interpréter comme une balise de script exécutable.

Ce comportement par défaut couvre la grande majorité des cas d'utilisation où vous affichez des données dynamiques et constitue une défense robuste contre les vulnérabilités XSS courantes.

La porte de sortie dangereuse : `dangerouslySetInnerHTML`

Il existe des situations très spécifiques où vous pourriez avoir besoin d'afficher du contenu HTML brut provenant d'une source externe (par exemple, le résultat formaté d'un éditeur de texte riche, ou l'intégration avec une bibliothèque qui génère directement du HTML). Pour ces cas exceptionnels, React fournit une "porte de sortie" délibérément nommée de manière alarmante : la prop `dangerouslySetInnerHTML`.

Son utilisation est volontairement verbeuse pour rappeler les risques encourus. Elle prend comme valeur un objet avec une clé `__html`, dont la valeur est la chaîne HTML brute que vous souhaitez injecter :

// !! ATTENTION : Utilisation risquée si 'htmlBrut' n'est pas SANITIZE !!
const htmlBrut = "Titre en HTML
Contenu en gras.";

function ContenuBrut() {
  return ;
}

// Rendu dans le DOM (simplifié) :
// 
//   Titre en HTML
//   Contenu en gras.
//

Pourquoi est-ce dangereux ? Parce que si la chaîne `htmlBrut` contient du code JavaScript malveillant (par exemple, `` ou directement une balise `