10 bonnes pratiques de sécurité pour React

Vous cherchez les meilleures façons de sécuriser votre application React ? Vous êtes au bon endroit ! Nous avons créé cette liste de contrôle des bonnes pratiques de sécurité pour React afin de vous aider, vous et votre équipe, à détecter et corriger les problèmes de sécurité dans vos applications React. Nous vous montrerons également comment tester automatiquement votre code React pour détecter les problèmes de sécurité et les corriger automatiquement.

C’est parti !

Télécharger la fiche pratique.

10 bonnes pratiques de sécurité pour React

1. Utilisez la protection XSS par défaut avec la liaison de données

2. Méfiez-vous des URL dangereuses et des injections de scripts via les URL

3. Assainissez et affichez le HTML

4. Évitez l’accès direct au DOM

5. Sécurisez le rendu côté serveur de React

6. Recherchez les vulnérabilités connues dans les dépendances

7. Évitez les attaques par injection JSON

8. Utilisez des versions non vulnérables de React

9. Utilisez des configurations de linter

10. Évitez le code dangereux des bibliothèques

1. Utilisez la protection XSS par défaut de React avec la liaison de données

React est-il vulnérable aux scripts intersites (XSS) ?

Par défaut, React est conçu pour ne pas être vulnérable, mais certaines options activables par les développeurs peuvent le rendre vulnérable aux scripts intersites.

Comment empêcher les attaques XSS dans React ?

Utilisez la liaison de données par défaut avec des accolades ({}) : React échappera automatiquement les valeurs pour vous protéger contre les attaques XSS. Notez que cette protection ne s’applique qu’au rendu de textContent, et non au rendu des attributs HTML.

Utilisez la syntaxe de liaison de données JSX ({}) pour insérer des données dans vos éléments.

À faire :

<div>{data}</div>

Évitez les valeurs d’attribut dynamiques sans validation personnalisée.

À ne pas faire :

<form action={data}>...

2. Méfiez-vous des URL dangereuses et des injections de scripts via les URL

Les URL peuvent contenir du code de script dynamique via des URL utilisant le protocole javascript:. Validez vos liens pour vous assurer qu’ils utilisent http: ou https: afin d’éviter les injections de scripts via des URL javascript:. Pour valider une URL, utilisez une fonction native d’analyse d’URL, puis comparez la propriété de protocole analysée à une liste d’autorisations.

À faire :

function validateURL(url) {
  const parsed = new URL(url)
  return ['https:', 'http:'].includes(parsed.protocol)
}

<a href={validateURL(url) ? url : ''}>Click here!</a>

À ne pas faire :

<a href={attackerControlled}>Click here!</a>

3. Assainissez et affichez le HTML

Il est possible d’insérer directement du HTML dans les nœuds DOM rendus à l’aide de dangerouslySetInnerHTML. Tout contenu inséré de cette manière doit être assaini au préalable. Utilisez une bibliothèque d’assainissement comme dompurify sur toutes les valeurs avant de les transmettre à la propriété dangerouslySetInnerHTML.

Utilisez dompurify pour insérer du HTML dans le DOM.

À faire :

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4. Évitez l’accès direct au DOM

Évitez toujours d’accéder au DOM pour insérer directement du contenu dans ses nœuds. Si vous devez le faire, utilisez dangerouslySetInnerHTML pour insérer le HTML et assainissez-le au préalable avec dompurify.

Qu’est-ce que dangerouslySetInnerHTML dans React ?

dangerouslySetInnerHTML est une propriété qui permet aux développeurs d’insérer directement du contenu HTML dans un élément HTML d’une application React.

À faire :

import purify from "dompurify";
<div dangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

Évitez d’utiliser des refs et findDomNode() pour accéder aux éléments du DOM rendus et y insérer directement du contenu via innerHTML ou des propriétés et méthodes similaires.

À ne pas faire :

this.myRef.current.innerHTML = attackerControlledValue;

5. Sécurisez le rendu côté serveur de React

La liaison de données échappe automatiquement le contenu lorsque vous utilisez des fonctions de rendu côté serveur telles que ReactDOMServer.renderToString() et ReactDOMServer.renderToStaticMarkup().

Évitez de concaténer des chaînes à la sortie de renderToStaticMarkup() avant de les envoyer au client pour l’hydratation.

Pour éviter les attaques XSS, ne concaténez pas de données non assainies à la sortie de renderToStaticMarkup().

À faire :

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

6. Recherchez les vulnérabilités connues dans les dépendances

Certaines versions de composants tiers peuvent présenter des problèmes de sécurité JavaScript. Vérifiez toujours vos dépendances avec un outil d’analyse de la composition logicielle (SCA) avant de les ajouter à un projet, et veillez à les mettre à jour dès qu’une nouvelle version est disponible.

Extension Snyk pour VS Code

Lorsque vous développez une application React dans VS Code, vous pouvez utiliser l’extension Snyk pour être averti de toute vulnérabilité connue dans votre projet. Ces alertes apparaissent sous forme de soulignements ondulés directement dans votre fichier package.json, dans le panneau des extensions Snyk et dans le panneau des problèmes de VS Code. Vous pouvez ainsi consulter les vulnérabilités sans quitter votre environnement de développement : toutes les informations sont à portée de main.

Application Snyk (https://app.snyk.io)

Ouvrir une PR pour corriger une vulnérabilité dans React ne prend que trois clics. Commencez par repérer la vulnérabilité à corriger dans votre application à l’aide de l’application Web Snyk. Cliquez ensuite sur Corriger cette vulnérabilité (ou sur Corriger ces vulnérabilités s’il y en a plusieurs). En savoir plus sur le produit Snyk.

Vous serez ensuite invité à confirmer l’ouverture d’une pull request (PR) pour corriger la vulnérabilité avec Snyk.

Après confirmation, vous accéderez à la PR ouverte par Snyk. Vous pourrez ainsi vérifier et tester que votre application fonctionne toujours comme prévu avec les modifications proposées avant de les fusionner.

Snyk CLI

Vous pouvez également utiliser la version gratuite de Snyk CLI pour rechercher les vulnérabilités. Corrigez automatiquement les vulnérabilités avec Snyk en intégrant votre système de gestion du code source pour recevoir des correctifs automatisés :

$ npx snyk test

7. Évitez les attaques par injection JSON

Il est courant d’envoyer des données JSON avec des pages React rendues côté serveur. Échappez toujours les caractères < en les remplaçant par une valeur inoffensive afin d’éviter les attaques par injection.

Remplacez toujours les caractères importants en HTML contenus dans le JSON par leurs équivalents inoffensifs.

À faire :

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8. Utilisez des versions non vulnérables de React

La bibliothèque React a connu plusieurs vulnérabilités de gravité élevée par le passé. Il est donc recommandé de toujours utiliser la dernière version.

Évitez les versions vulnérables de react et react-dom en vérifiant que vous disposez de la dernière version à l’aide de la commande npm outdated.

9. Utilisez des configurations de linter

Installez des configurations et des plugins de linter qui détectent automatiquement les problèmes de sécurité dans votre code et vous proposent des solutions.

Utilisez la configuration de sécurité ESLint pour React afin de détecter les problèmes de sécurité dans votre base de code.

Configurez un hook pre-commit qui échoue lorsque des problèmes liés à la sécurité sont détectés par le linter, à l’aide d’une bibliothèque comme husky.

Utilisez Snyk pour effectuer automatiquement la mise à jour vers les nouvelles versions lorsque les versions que vous utilisez présentent des vulnérabilités.

10. Évitez le code dangereux des bibliothèques

Le code des bibliothèques est souvent utilisé pour effectuer des opérations dangereuses, comme l’insertion directe de HTML dans le DOM. Examinez manuellement le code des bibliothèques ou utilisez des linters pour détecter les utilisations dangereuses des mécanismes de sécurité de React.

Évitez les bibliothèques qui utilisent dangerouslySetInnerHTML, innerHTML, des URL non validées ou d’autres pratiques dangereuses. Utilisez des linters de sécurité dans votre dossier node_modules pour détecter les pratiques à risque dans le code de vos bibliothèques.

Téléchargez la fiche pratique sur la sécurité de React

Téléchargez ce PDF pratique et utilisez-le comme liste de contrôle pour vérifier la sécurité de votre application React.