Tous les guides
Sévérité ÉlevéeEn-têtes de sécurité

Content-Security-Policy (CSP) : ce que c’est et comment en ajouter une

La Content-Security-Policy (CSP) est un en-tête de réponse HTTP qui indique au navigateur quelles sources de scripts, de styles et d’autres contenus il a le droit de charger et d’exécuter. Une bonne CSP est l’une des défenses les plus solides contre le cross-site scripting (XSS).

Ce que c’est

La CSP est une liste d’autorisations appliquée par le navigateur. Quand votre serveur envoie un en-tête Content-Security-Policy, le navigateur refuse de charger ou d’exécuter tout ce que la politique n’autorise pas explicitement : scripts inline, domaines tiers, eval(), etc.

Une politique est une liste de directives. Par exemple, script-src 'self' signifie « n’exécute que le JavaScript servi depuis ma propre origine », tandis que object-src 'none' bloque totalement les plugins hérités.

Pourquoi ça compte

Sans CSP, le moindre bug d’injection HTML ou de XSS permet à un attaquant d’exécuter du JavaScript arbitraire dans le navigateur de vos utilisateurs : vol de sessions, réécriture de la page ou exfiltration de données.

Une CSP faible vaut presque une absence de CSP. 'unsafe-inline' réautorise les scripts inline dont dépendent les attaquants, et une source avec joker comme script-src * laisse charger des scripts depuis n’importe où, ce qui en annule l’intérêt.

Comment corriger

Ajoutez une politique de base dans Next.js

Définissez l’en-tête dans next.config.js pour qu’il s’applique à toutes les réponses. Commencez strict et n’assouplissez que là où c’est nécessaire.

// next.config.js
const csp = [
  "default-src 'self'",
  "script-src 'self'",
  "style-src 'self' 'unsafe-inline'",
  "img-src 'self' data:",
  "base-uri 'none'",
  "frame-ancestors 'none'",
  "object-src 'none'",
].join("; ");

module.exports = {
  async headers() {
    return [{ source: "/:path*", headers: [{ key: "Content-Security-Policy", value: csp }] }];
  },
};
Remplacez unsafe-inline par des nonces

Si vous avez besoin de scripts inline, générez un nonce par requête et ajoutez-le à la fois à la balise script et à la politique (script-src 'self' 'nonce-<value>') au lieu d’utiliser 'unsafe-inline'.

Définissez toujours les directives de durcissement

base-uri 'none', frame-ancestors 'none' et object-src 'none' ferment des contournements courants (injection de balise base, clickjacking et intégration de plugins) et constituent des valeurs par défaut sûres pour la plupart des apps.

FAQ

Une CSP ralentit-elle mon site ?

Non. La CSP n’est qu’un en-tête que le navigateur évalue ; elle n’ajoute aucune latence mesurable. Le vrai coût, c’est le travail d’ingénierie pour supprimer les scripts inline.

Quelle est la différence entre Content-Security-Policy et X-Frame-Options ?

X-Frame-Options ne contrôle que l’intégration en iframe (clickjacking). La directive frame-ancestors de la CSP la remplace, et la CSP régit aussi les scripts, les styles, les images, et plus encore.

Votre app est-elle concernée ?

AppSafe détecte ce problème et des dizaines d’autres en un seul scan gratuit.

Scanner mon app gratuitement

Guides liés

HTTP Strict Transport Security (HSTS) expliqué

Forcez chaque connexion à passer en HTTPS — même la première.

Les attributs de cookies Secure, HttpOnly et SameSite

Trois attributs qui empêchent le vol des cookies de session.

Pourquoi votre site a besoin d’une redirection HTTP→HTTPS

Ne laissez pas la porte non sécurisée ouverte.