Générateur de nonce CSP

Comment utiliser le nonce généré

1. Le préréglage Nonce CSP est actif : 16 octets aléatoires en Base64, soit une valeur de 24 caractères qui se termine par ==.

2. Prêt à coller affiche l’en-tête et la balise correspondante, par exemple :

   Content-Security-Policy: script-src 'nonce-SQu4/GjzG3plY6CUwsx8gA=='
   
   <script nonce="SQu4/GjzG3plY6CUwsx8gA==" src="/app.js"></script>
   

3. Utilisez-le pour essayer une politique dans une page de test locale ou une configuration de préproduction. Appuyez sur Générer à nouveau pour obtenir une autre valeur.

Un nonce copié depuis cette page est le même à chaque requête : il ne protège donc rien en production. Les vrais déploiements le génèrent dans le code serveur, comme montré plus bas.

Comment fonctionne une politique à base de nonce

Avec script-src 'nonce-…', le navigateur n’exécute un script que si son attribut nonce correspond à la valeur de l’en-tête de cette même réponse. Vos propres balises <script> reçoivent l’attribut depuis vos templates. Le balisage injecté par un attaquant via une faille XSS ne connaît pas la valeur, puisqu’elle change à chaque chargement de page, et le navigateur refuse de l’exécuter.

Trois détails comptent en pratique :

• La valeur est comparée comme du texte. Copiez-la exactement, = compris, et gardez les apostrophes autour de 'nonce-…' dans l’en-tête, mais pas dans l’attribut.
• Les navigateurs masquent l’attribut. Une fois la page chargée, getAttribute("nonce") renvoie une chaîne vide et les sélecteurs CSS ne voient pas la valeur, ce qui bloque certaines techniques d’exfiltration. Les scripts qui en ont besoin lisent plutôt la propriété nonce.
• 'strict-dynamic' permet à un script de confiance doté d’un nonce de charger d’autres scripts sans que chacun ait besoin de son propre nonce. C’est le compagnon habituel des nonces dans une politique moderne, et avec lui le navigateur ignore les listes d’hôtes autorisés comme https:.

La politique peut aussi être fournie dans une balise <meta http-equiv="Content-Security-Policy"> ; les nonces y fonctionnent également, mais certaines directives, comme frame-ancestors, non.

Générer un nonce par réponse

Le serveur crée 16 octets aléatoires pour chaque requête, les place dans l’en-tête et transmet la même valeur au template. En Node.js, sans framework :

const crypto = require("crypto");
const http = require("http");

http.createServer((req, res) => {
  const nonce = crypto.randomBytes(16).toString("base64");
  res.setHeader("Content-Security-Policy",
    `script-src 'nonce-${nonce}' 'strict-dynamic'; object-src 'none'; base-uri 'none'`);
  res.setHeader("Content-Type", "text/html; charset=utf-8");
  res.end(`<script nonce="${nonce}" src="/app.js"></script>`);
}).listen(8080);

En Python, base64.b64encode(secrets.token_bytes(16)).decode() donne le même type de valeur ; les frameworks dotés d’un middleware CSP l’exposent généralement comme variable de template. Quel que soit votre choix, assurez-vous qu’un cache placé devant le serveur ne stocke pas le HTML avec un nonce pour le servir à tous les visiteurs. Mettre en cache le corps de la page alors que l’en-tête change casse tous les scripts ; mettre les deux en cache répète le même nonce pour tout le monde.

Nonces, hachages et SRI

Un nonce autorise une balise script pour une réponse. Un hachage CSP autorise un script inline précis pour toujours : 'sha256-…' est le SHA-256 en Base64 du texte exact situé entre <script> et </script>. Pour <script>alert('Hello');</script>, c’est :

script-src 'sha256-gKHd+pSZOJ3MwBsFalomyNobAcinjJ44ArqbIKlcniQ='

Les hachages conviennent aux sites statiques et aux extraits inline qui ne changent jamais ; calculez-les avec l’outil SHA-256 en Base64 en faisant attention aux espaces, car une seule espace en trop change le hachage. Subresource Integrity est un troisième mécanisme qui utilise les mêmes condensats Base64 : integrity="sha384-…" sur un <script src> fait vérifier au navigateur le fichier téléchargé lui-même. Le générateur de hachage SRI construit ces balises.

FAQ