Content Security Policy avec nonce : le guide Next.js

La Content Security Policy (CSP) est l'un des remparts les plus efficaces contre les attaques XSS, qui restent parmi les plus courantes sur le web. Mais une CSP mal configurée ne protège de rien — ou casse votre site. Le bon réglage en Next.js passe par le nonce.

Ce qu'est une CSP (et contre quoi elle protège)

La CSP est un en-tête HTTP qui dit au navigateur quelles ressources il a le droit d'exécuter : quels scripts, styles, images, domaines. Si un attaquant parvient à injecter un script malveillant dans votre page (XSS), une CSP stricte empêche le navigateur de l'exécuter, car il ne fait pas partie des sources autorisées.

Le piège du unsafe-inline

La tentation, pour que tout fonctionne vite, est d'autoriser script-src 'unsafe-inline'. Mais ça revient à laisser la porte grande ouverte : n'importe quel script inline injecté s'exécutera. Une CSP avec unsafe-inline donne l'illusion d'être protégé sans l'être. C'est là que le nonce entre en jeu.

La solution : le nonce par requête

Un nonce est une valeur aléatoire, unique à chaque chargement de page. Le principe :

• À chaque requête, le serveur génère un nonce aléatoire.
• Il l'ajoute à l'en-tête CSP (script-src 'nonce-XXXX').
• Seuls les scripts portant l'attribut nonce="XXXX" sont exécutés.
• Un script injecté par un attaquant n'a pas le bon nonce → le navigateur le bloque.

La mise en place dans Next.js

En pratique, on génère le nonce dans le middleware Next.js, on le transmet via les en-têtes, et Next.js l'applique automatiquement à ses propres scripts. Les points d'attention :

• Générer le nonce dans le middleware et le propager (header de requête).
• Construire la CSP avec ce nonce pour script-src et, idéalement, style-src.
• Tester chaque page : les scripts tiers (analytics, pixels) doivent être whitelistés proprement.
• Surveiller la console : les violations CSP y sont rapportées pendant la phase de réglage.

Le bon réflexe

Une CSP se déploie progressivement : on commence souvent en mode report-only (qui signale les violations sans bloquer), on ajuste jusqu'à ce qu'il n'y ait plus de faux positifs, puis on passe en mode bloquant. C'est cette méthode qui permet d'avoir une politique stricte ET un site qui fonctionne — l'objectif final étant une CSP sans unsafe-inline, basée sur le nonce.