Table des matières
Open Table des matières
Qu’est-ce qu’une Content-Security-Policy (CSP) ?
La CSP est un header HTTP qui indique au navigateur quelles ressources il est autorisé à charger (scripts, styles, images, etc.) et depuis quelles sources.
Son objectif principal : empêcher l’exécution de contenu non prévu dans la page, comme un script malveillant injecté par un attaquant (attaque XSS).
Prenons un exemple simple :
Content-Security-Policy: default-src 'self'
Sans CSP, le navigateur l’exécutera. Avec une bonne politique, il le bloquera purement et simplement.
Intégrer une CSP dans Nginx
Dans Nginx, la CSP se configure via une directive add_header dans votre bloc server {} ou location {}.
Exemple basique :
add_header Content-Security-Policy "default-src 'self'" always;
add_header Content-Security-Policy “default-src ‘self’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ https:; style-src ‘self’ ‘unsafe-inline’ https:; img-src ‘self’ data: https:; font-src ‘self’ https: data:; connect-src ‘self’ https:; frame-ancestors ‘self’;” always;
Détails des directives :
default-src 'self': autorise uniquement les ressources locales par défautscript-src: autorise JS inline (si nécessaire) + sources HTTPSstyle-src: idem pour les feuilles CSSimg-src: autorise les images locales, en base64 (data:) et via CDNfont-src: autorise les polices locales + Google Fontsconnect-src: autorise les connexions Ajax/Fetch/WebSocketframe-ancestors 'self': empêche l’intégration dans une iframe par un autre domaine
💡 Tu peux affiner chaque directive selon les besoins de ton site.
CSP et environnement frontend moderne
Si tu utilises un framework comme Vue, React, Angular ou un CMS comme WordPress, il faut adapter la CSP :
- WordPress + Elementor : attention à
unsafe-inlinepour les styles et scripts dans les shortcodes. - React / Vue avec Webpack : éviter
unsafe-evalsi possible. - CDN (Bootstrap, jQuery) : autorise
https:dansscript-srcetstyle-src.
Exemple spécifique WordPress avec CDN :
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://code.jquery.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;" always;
add_header Content-Security-Policy-Report-Only “default-src ‘self’; script-src ‘self’ https:;” always;
Couple ça avec une plateforme de monitoring CSP comme :
Où ajouter la CSP dans Nginx ?
Toujours dans le bloc server {} ou directement dans un location si tu veux l’appliquer uniquement sur des zones sensibles (/admin, /login, etc.)
Important : ajoute always pour que le header soit appliqué même sur les pages 404/500.
Conseils pratiques
- 🔁 Teste ta CSP sur un environnement de staging avant production
- ✅ Utilise
report-onlypour analyser sans casse - 🔍 Inspecte les erreurs CSP dans la console développeur de ton navigateur
- 🧪 Utilise
csp-evaluatorpour voir les failles potentielles - ❌ Évite
unsafe-inlineetunsafe-evalsi ton frontend le permet - 🧩 Ne bloque jamais
img-src data:si tu utilises des images en base64 (ex. avatars dans WordPress)
Tester votre configuration
Voici les meilleurs outils pour valider ta politique CSP :
Avec une CSP bien configurée, ton site obtiendra facilement un score A ou A+ sur ces plateformes.
Cas réel : CSP dans un contexte scolaire (site avec sous-répertoires)
Si tu héberges des applications ou sites étudiants dans des sous-répertoires (/tata, /toto, etc.), tu peux appliquer une CSP globale dans un bloc avec regex :
location ~ ^/([a-z0-9-]+)(/.*)?$ {
root /home/app/htdocs;
try_files $uri $uri/ /$1/index.php?$args;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https:;" always;
}