Politique de sécurité du contenu pour les applications React

La politique de sécurité du contenu (CSP) est un en-tête de réponse HTTP qui indique au navigateur quelles sources de contenu sont fiables. En déclarant précisément quels scripts, feuilles de style, images et polices peuvent être chargés, CSP empêche l’exécution de contenu malveillant injecté — même si une vulnérabilité XSS permet à l’attaquant d’injecter du HTML dans la page.

default-src 'self' définit la base : tous les types de ressources (scripts, feuilles de style, images, polices, cadres) peuvent uniquement être chargés depuis la même origine. script-src 'self' restreint le chargement des scripts à la même origine et bloque les scripts provenant de CDN externes, sauf s’ils sont explicitement répertoriés. Ces deux directives constituent ensemble le fondement d’une CSP restrictive.

eval() transforme une chaîne en code exécutable à l’exécution — c’est précisément ce dont les charges utiles XSS ont besoin. Une CSP avec script-src 'self' (sans 'unsafe-eval') bloque eval() et les fonctions associées comme new Function() et setTimeout(string). Cela élimine un mécanisme majeur d’exécution de charges utiles XSS.

'strict-dynamic' dans script-src accorde sa confiance aux scripts chargés par des scripts déjà fiables. Cela permet les mécanismes de chargement dynamique utilisés par les outils de regroupement, sans vous obliger à ajouter chaque URL de CDN à la liste d’autorisation. Un script fiable peut charger d’autres scripts, qui héritent de cette confiance.

Si votre application a besoin d’un script intégré précis (par exemple, un extrait d’initialisation d’analyse), vous pouvez calculer son hachage SHA-256 et ajouter 'sha256-base64hash' à script-src. Seuls les scripts correspondant exactement à ce hachage sont autorisés à s’exécuter directement dans la page. Tout script injecté par un attaquant aura un hachage différent et sera bloqué.

Une valeur nonce est une valeur aléatoire générée de manière cryptographique par le serveur pour chaque requête. Le serveur ajoute cette valeur à la fois à la balise de script (<script nonce="abc123">) et à l’en-tête CSP (script-src 'nonce-abc123'). Seuls les scripts portant la valeur nonce correcte sont exécutés. Les attaquants ne peuvent pas prédire cette valeur et leurs scripts injectés ne peuvent donc pas l’utiliser.

CSP prend en charge le signalement des violations via report-uri /csp-violation-endpoint ou via la directive plus récente report-to. Lorsque le navigateur bloque une ressource en raison de CSP, il envoie un rapport JSON au point de terminaison. La surveillance de ces rapports vous aide à repérer à la fois les problèmes de configuration légitimes et les tentatives d’attaque en cours.

Dans Next.js, ajoutez les en-têtes CSP dans le middleware : créez middleware.ts, générez une valeur nonce, définissez l’en-tête Content-Security-Policy, puis transmettez la valeur nonce à la page via un en-tête de réponse. La mise en page de la page lit la valeur nonce dans l’en-tête et l’applique à tous les scripts intégrés et aux balises de style.

Content-Security-Policy-Report-Only est le mode de vérification : le navigateur n’applique aucune règle, mais envoie des rapports de violation pour tout ce qui aurait été bloqué. Déployez d’abord en mode de signalement uniquement, corrigez toutes les violations, puis passez à l’en-tête Content-Security-Policy appliqué afin d’éviter de casser l’application.

Lorsque CSP bloque une ressource, la console de Chrome DevTools affiche un message d’erreur rouge indiquant l’URL bloquée et la directive enfreinte. Ces messages sont extrêmement utiles pendant le développement et les vérifications. Chaque violation doit être corrigée soit en ajustant la politique, soit en déplaçant la ressource vers une source autorisée, soit en utilisant une valeur nonce ou un hachage.

Une CSP pratique pour une SPA React : default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. frame-ancestors 'none' empêche également le détournement de clics en bloquant l’intégration de votre application dans des cadres intégrés.

Que bloque script-src 'self' dans une politique de sécurité du contenu ?

CSP est un en-tête HTTP qui déclare les sources de contenu fiables. default-src 'self' et script-src 'self' bloquent les scripts externes et eval. Les scripts intégrés sont autorisés au moyen de hachages ou de valeurs nonce. 'strict-dynamic' prend en charge le chargement dynamique des scripts. Utilisez Content-Security-Policy-Report-Only pour effectuer les vérifications avant l’application de la politique. Next.js met en œuvre CSP via le middleware. La console de DevTools affiche les violations en temps réel.