Qu’est-ce qu’une Content Security Policy ?
Une Content Security Policy, ou CSP, est un en-tête de réponse qui liste d’où une page peut charger scripts, styles, polices, images et cadres. Tout ce qui n’est pas sur la liste est bloqué.
Son rôle principal est d’arrêter le cross-site scripting. Si un attaquant réussit à injecter un script dans votre page, le navigateur refuse pourtant de l’exécuter, car il n’est pas sur la liste. Ainsi, une bonne politique rend inoffensifs beaucoup de bugs dangereux.
Étape 1 : partir strict
Commencez par la politique utile la plus stricte. Dans le fichier .htaccess sous Apache, ajoutez une ligne qui n’autorise que les fichiers de votre propre site :
Header always set Content-Security-Policy "default-src 'self'"Puis rechargez la page. Elle s’ouvre encore, mais certaines parties peuvent casser. Dans notre démo, une bannière de livraison gratuite ajoutée par un petit script en ligne a disparu, et la police du titre a changé. C’est normal, car la politique les bloque désormais.
Étape 2 : lire la console
Ouvrez les outils de développement du navigateur et regardez la console. Chaque fichier bloqué y apparaît avec la règle qui l’a bloqué. Dans notre démo, la politique a bloqué la feuille de style de Google Fonts et le script en ligne.
Cette liste est votre liste de tâches. Parcourez-la ligne par ligne et demandez-vous chaque fois : en ai-je vraiment besoin ? Sinon, retirez-le de la page au lieu de l’autoriser.
Étape 3 : n’autoriser que l’utile
Ajoutez maintenant des exceptions précises. Pour Google Fonts, autorisez les styles de fonts.googleapis.com et les fichiers de police de fonts.gstatic.com :
Header always set Content-Security-Policy "default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"Scripts en ligne : utiliser un hash
Pour un petit script en ligne, ajoutez son hash à script-src. Le hash autorise ce script précis et rien d’autre. De plus, la console de Chrome affiche le hash dans le message d’erreur. Copiez-le dans la politique :
script-src 'self' 'sha256-AbC123...='
Si le script change souvent, un nonce est plus simple : le serveur ajoute une nouvelle valeur aléatoire dans la politique et dans chaque balise script à chaque requête. De cette façon, la politique reste stricte.
Tester d’abord en Report-Only
Sur un site en ligne, n’activez jamais une nouvelle politique sans test. Envoyez-la plutôt en Content-Security-Policy-Report-Only. Le navigateur signale alors chaque problème dans la console mais ne bloque rien, donc les visiteurs ne voient jamais de page cassée.
Header always set Content-Security-Policy-Report-Only "default-src 'self'"Parcourez chaque type de page pendant quelques jours : accueil, articles, paiement et formulaires. Quand la console reste propre, renommez l’en-tête en vraie Content-Security-Policy.
Exemples prêts
Chaque site est différent, donc prenez-les comme point de départ. Ensuite, vérifiez-les avec la console.
Un site statique simple
default-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'self'Un site avec Google Analytics
default-src 'self'; script-src 'self' https://www.googletagmanager.com; connect-src 'self' https://www.google-analytics.com; img-src 'self' https://www.google-analytics.comDes directives utiles partout
object-src 'none' bloque les vieux plugins, base-uri 'self' arrête un faux lien de base, et frame-ancestors 'self' empêche d’autres sites d’encadrer vos pages. Elles ne cassent presque jamais rien.
Comment vérifier votre politique
D’abord, vérifiez vos en-têtes en ligne avec notre HTTP Header Checker gratuit. Il montre la politique exacte reçue par les visiteurs et signale les parties manquantes ou faibles.
Ensuite, ouvrez les pages les plus importantes avec la console ouverte. Si vous ne voyez aucune erreur CSP rouge, la politique convient au site. Enfin, revérifiez après chaque nouvelle extension, widget ou code de suivi, car chacun peut demander sa propre exception.
Erreurs fréquentes
- Ajouter
'unsafe-inline'pour faire disparaître les erreurs. Cela laisse aussi passer les scripts injectés, précisément ce que la politique doit arrêter. - Utiliser un joker comme
https:dans script-src, qui autorise les scripts de n’importe quel site. - Activer une nouvelle politique sans la tester d’abord en Report-Only.
- Envoyer deux politiques différentes depuis le serveur et une extension ; le navigateur applique les deux, donc la règle la plus stricte gagne.
- Oublier de mettre à jour la politique après l’ajout d’un service.
En bref : partir strict, lire la console, autoriser des hôtes et hashs précis, et tester en Report-Only. Pour le détail de chaque directive, voyez le guide MDN sur CSP.
Questions et réponses
Qu’est-ce qu’une Content Security Policy ?
Un en-tête de réponse qui dit au navigateur depuis quelles sources une page peut charger scripts, styles, polices et autres fichiers. Tout le reste est bloqué.
Pourquoi mon site casse après l’ajout d’une CSP ?
Car la politique bloque les fichiers absents de sa liste. Ouvrez donc la console, lisez chaque élément bloqué et autorisez seulement l’utile.
Qu’est-ce que Content-Security-Policy-Report-Only ?
Une version de test de l’en-tête. Le navigateur signale chaque problème sans rien bloquer, ainsi vous ajustez la politique sans risque.
Faut-il utiliser unsafe-inline ?
Non, car il autorise tous les scripts en ligne, y compris injectés. Utilisez plutôt un hash ou un nonce pour les rares scripts nécessaires.
Comment autoriser un script en ligne ?
Ajoutez son hash sha256 à script-src. En effet, la console de Chrome affiche le hash dans l’erreur, donc vous pouvez le copier.
Quelle différence entre un hash et un nonce ?
Un hash correspond à un script précis. En revanche, un nonce est une valeur aléatoire qui change à chaque requête, placée dans la politique et la balise script.
Comment autoriser Google Fonts dans une CSP ?
Autorisez fonts.googleapis.com dans style-src et fonts.gstatic.com dans font-src.
Une CSP aide-t-elle le SEO ?
Pas directement. Cependant, elle protège visiteurs et site, ce qui garde vos pages sûres et fiables.
Peut-on mettre une CSP dans une balise meta ?
Oui, avec une balise meta http-equiv, pourtant certaines directives comme frame-ancestors ne marchent que dans le vrai en-tête.
Comment ajouter une CSP sur Nginx ?
Utilisez add_header Content-Security-Policy "..." always; dans le bloc server, puis rechargez Nginx.
WordPress fonctionne-t-il avec une CSP stricte ?
Souvent oui côté public, mais beaucoup d’extensions ajoutent des scripts en ligne. Testez donc en Report-Only et ajoutez des hashs ou nonces.
À quoi sert default-src ?
C’est la règle de secours pour chaque type de fichier sans directive propre, comme script-src ou img-src.
Qu’est-ce que frame-ancestors ?
Une directive qui dit quels sites peuvent afficher votre page dans un cadre. Avec 'self', vous empêchez donc les autres de l’encadrer, ce qui bloque le clickjacking.
Peut-on avoir deux en-têtes CSP ?
Le navigateur applique les deux, et un fichier doit passer les deux. La page devient donc souvent plus stricte que prévu ; gardez-en un seul.
Pourquoi la console montre des erreurs CSP d’extensions ?
Car certaines extensions injectent des scripts et déclenchent des alertes. Testez donc dans une fenêtre privée.
Comment autoriser des images d’un autre domaine ?
Ajoutez ce domaine à img-src, par exemple img-src 'self' https://images.example.com.
À quoi sert object-src 'none' ?
Il bloque l’ancien contenu de plugins comme Flash. Les sites modernes n’en ont jamais besoin, donc le bloquer est sûr.
Une CSP suffit-elle contre le XSS ?
C’est une couche en plus solide, cependant il faut toujours échapper la sortie et valider l’entrée sur le serveur.
Comment vérifier ma CSP ?
D’abord, utilisez notre HTTP Header Checker gratuit pour voir l’en-tête en ligne, puis parcourez vos pages principales avec la console ouverte.
Le SEO Checker vérifie-t-il la CSP ?
Oui. Notre SEO Checker indique si l’en-tête est envoyé et renvoie vers ce guide quand il manque.