Comment déployer une politique de sécurité de contenu (CSP) stricte avec Next.js

Guy Dumais
Guy Dumais
Cover Image for Comment déployer une politique de sécurité de contenu (CSP) stricte avec Next.js

D'après l'étude la plus complète à ce jour de Google, 95 % des déploiements réels de politique de sécurité du contenu (CSP) sont contournés et 99,34 % des hôtes dotés de politiques CSP utilisent des politiques qui n'offrent aucun avantage contre XSS.

C'est pourquoi Google suggère que le modèle de désignation de la confiance en spécifiant des listes blanches d'URL à partir desquelles les scripts peuvent s'exécuter soit remplacé par une approche basée sur des nonces et des hachages, déjà définis par la spécification CSP et disponibles dans les principales implémentations de navigateurs. D'où le nom CSP strict.

Dans le cadre d'une Single Page App (SPA) comme le framework Next.js React, nous devons utiliser un CSP basé sur Hashed afin d'intégrer correctement un CSP strict qui offrira une réelle protection contre les attaques CSS.

Selon la complexité de votre application, l'intégration d'une politique de sécurité du contenu basée sur le hachage peut être triviale et nécessiter de nombreuses manipulations de code. C'est pourquoi je suis venu créer un package sur NPM spécialement conçu pour Next.js afin de permettre aux développeurs d'intégrer un CSP strict en un clin d'œil avec seulement quelques lignes de code.


next-strict-csp


next-strict-csp est un générateur de politique de sécurité stricte du contenu basé sur le hachage pour Next.js qui s'intègre facilement dans le fichier _document.tsx de votre application Next.js. Une fois en production, il injectera automatiquement les hachages dans la balise méta de la politique de sécurité du contenu et se protégera contre XSS une fois déployé et mis en cache sur le CDN.


Voici un exemple de _document.tsx avec une intégration basique de next-strict-csp :

Loading...

Une fois mis en production, vous obtiendrez une balise méta de politique de sécurité du contenu qui ressemble à ceci:

Loading...

Avec un CSP strict, vous devez également hacher vos scripts en ligne. Cela pourrait être facilement réalisé avec next-strict-csp en intégrant vos scripts en ligne dans un tableau comme celui-ci dans _document.tsx:

Loading...

Une fois en ligne, vos hachages de scripts en ligne seront injectés dans la balise méta de la politique de sécurité du contenu comme ceci :

Loading...


Dernier mot

J'espère que vous avez apprécié next-strict-csp et n'hésitez pas à laisser un commentaire pour me dire ce que vous en pensez.

Merci de votre attention, à bientôt !



Commentaires:

    Partagez: