draft: En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web

2026-05-16 19:26:11 +02:00
parent 4d07f9beda
commit ca9a4dd771
2 changed files with 66 additions and 0 deletions
@@ -0,0 +1,4 @@
+{
+    "title": "En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web",
+    "_updated_at": "2026-05-16 17:26:11"
+}
@@ -0,0 +1,62 @@
+# En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web
+
+![](csp.png)
+
+La **Content Security Policy** (CSP) est un en-tête HTTP qui permet de déclarer au navigateur quelles sources de contenu sont autorisées sur une page : scripts, images, styles, iframes, etc. Bien configurée, elle constitue l'une des défenses les plus efficaces contre les attaques de type **cross-site scripting (XSS)** et l'injection de ressources tierces non désirées.
+
+## Comment l'activer
+
+Deux méthodes principales permettent de déclarer une CSP.
+
+**1. Via la configuration du serveur** (recommandé). Sur Apache, dans un `.htaccess` ou un bloc `<Location>` :
+
+```
+Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self' https:; child-src 'none';"
+```
+
+**2. Via une balise `<meta>` dans le HTML**, utile lorsqu'on n'a pas la main sur le serveur :
+
+```html
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https:; child-src 'none';">
+```
+
+> Astuce : avant de passer en production, utilisez l'en-tête `Content-Security-Policy-Report-Only`. Le navigateur signalera les violations sans bloquer le contenu, ce qui permet d'ajuster les règles sans casser le site.
+
+## Les directives à connaître
+
+Une CSP se compose d'une liste de **directives**, chacune contrôlant un type de ressource :
+
+- `default-src` — valeur par défaut pour toutes les autres directives.
+- `script-src` — sources autorisées pour le JavaScript.
+- `style-src` — sources autorisées pour le CSS.
+- `img-src` — sources autorisées pour les images.
+- `connect-src` — destinations autorisées pour `fetch`, `XMLHttpRequest`, WebSocket.
+- `frame-ancestors` — sites autorisés à embarquer la page dans une iframe (remplace `X-Frame-Options`).
+- `child-src` — sources autorisées pour les iframes et workers.
+
+Chaque directive accepte des valeurs comme `'self'` (même origine), `'none'` (rien), une URL, ou des mots-clés comme `'unsafe-inline'` (à éviter).
+
+La liste complète est documentée sur [MDN : Content-Security-Policy](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy).
+
+## Exemple commenté
+
+```
+Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; img-src 'self' https://example.com;
+```
+
+Cette politique autorise :
+- tout contenu par défaut uniquement depuis la même origine ;
+- les scripts depuis l'origine du site **et** `https://example.com` ;
+- les images depuis l'origine du site **et** `https://example.com`.
+
+Tout le reste est bloqué par le navigateur.
+
+## Précautions
+
+Une CSP trop restrictive peut casser un site en bloquant des ressources légitimes (analytics, polices, widgets tiers). Procédez par étapes : commencez en mode `Report-Only`, analysez les rapports de violation, puis durcissez progressivement la politique.
+
+## Ressources
+- [W3C : Content Security Policy Level 3](https://www.w3.org/TR/CSP3/)
+- [Mozilla : Content Security Policy](https://developer.mozilla.org/fr/docs/Web/HTTP/CSP)
+
+Crédit image : *Midjourney*