publish: En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web
This commit is contained in:
Cédrix
@@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"title": "En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web",
|
|
||||||
"_updated_at": "2026-05-16 17:26:19",
|
|
||||||
"slug": "20230111-en-tetes-http-csp-securiser-le-contenu-d-un-site-web",
|
|
||||||
"published": true,
|
|
||||||
"published_at": "2023-01-11 17:32",
|
|
||||||
"category": "Journal geek",
|
|
||||||
"tags": [],
|
|
||||||
"seo_title": "",
|
|
||||||
"seo_description": "",
|
|
||||||
"og_image": "https://www.abonnel.fr/file?uuid=11055b05-7c03-48f2-b4ad-e978980dba67&name=cover.png"
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
# En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web
|
|
||||||
|
|
||||||
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*
|
|
||||||
@@ -1,41 +1,60 @@
|
|||||||
# En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web
|
# En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
Les CSP (Content Security Policy) sont des en-têtes HTTP qui permettent de définir les règles de sécurité pour le contenu d'un site Web. Elles sont utilisées pour aider à protéger le site et ses utilisateurs contre diverses attaques de sécurité, telles que l'injection de code malveillant ou la fuite de données sensibles.
|
## Comment l'activer
|
||||||
|
|
||||||
Pour activer CSP, vous devez configurer vos serveurs web afin d'ajouter un en-tête (header) aux réponses. Dans une configuration Apache, en fichier .htaccess ou dans une balise "Location", par exemple :
|
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'; scriptimg-src 'self' https:**; child-src 'none';"
|
Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self' https:; child-src 'none';"
|
||||||
```
|
```
|
||||||
|
|
||||||
Une autre possibilité consiste à utiliser l'élément HTML `<meta>` pour configurer la règle.
|
**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 https:**; child-src 'none';">
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https:; child-src 'none';">
|
||||||
```
|
```
|
||||||
|
|
||||||
Il existe de nombreuses directives que vous pouvez utiliser pour définir des règles de sécurité précises afin de :
|
> 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.
|
||||||
- Empêcher les écoutes du trafic
|
|
||||||
- Réduire des attaques cross site scripting (XSS)
|
|
||||||
|
|
||||||
Voici comment utiliser les CSP dans un site Web.
|
## Les directives à connaître
|
||||||
|
|
||||||
Définissez les règles de sécurité que vous souhaitez appliquer à votre site. Par exemple, vous pouvez spécifier quelles sources de contenu (scripts, images, etc.) sont autorisées à être chargées sur votre site. Voir la page du W3C des[directives pour contrôler les ressources que l'agent utilisateur est autorisé à charger pour une page donnée](https:*developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy).
|
Une CSP se compose d'une liste de **directives**, chacune contrôlant un type de ressource :
|
||||||
|
|
||||||
Ajoutez l'en-tête HTTP `Content-Security-Policy` à votre site. Vous pouvez le faire soit en modifiant le fichier `.htaccess` de votre serveur, soit en ajoutant l'en-tête directement dans le code HTML de votre site.
|
- `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.
|
||||||
|
|
||||||
Content-Security-Policy: règle
|
Chaque directive accepte des valeurs comme `'self'` (même origine), `'none'` (rien), une URL, ou des mots-clés comme `'unsafe-inline'` (à éviter).
|
||||||
|
|
||||||
Définissez la valeur de l'en-tête Content-Security-Policy en spécifiant les règles de sécurité que vous avez définies. Par exemple :
|
La liste complète est documentée sur [MDN : Content-Security-Policy](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy).
|
||||||
|
|
||||||
Content-Security-Policy: default-src 'self'; script-src 'self' https:*example.com; img-src 'self' https:*example.com;
|
## Exemple commenté
|
||||||
|
|
||||||
Cet exemple autorise le chargement de contenu uniquement à partir de la même origine que le site ('self') pour le contenu par défaut (`default-src`) et les scripts (`script-src`), tandis que les images (`img-src`) peuvent être chargées à partir de l'origine du site ou de l'URL `https:*example.com`.
|
```
|
||||||
|
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; img-src 'self' https://example.com;
|
||||||
|
```
|
||||||
|
|
||||||
## Versions, crédits et ressources
|
Cette politique autorise :
|
||||||
- [W3C : Content Security Policy Level 3](https:*www.w3.org/TR/CSP3/)
|
- tout contenu par défaut uniquement depuis la même origine ;
|
||||||
- [Mozilla : Content Security Policy](https:*developer.mozilla.org/fr/docs/Web/HTTP/CSP)
|
- 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*
|
Crédit image : *Midjourney*
|
||||||
@@ -4,15 +4,24 @@
|
|||||||
"title": "En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web",
|
"title": "En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web",
|
||||||
"author": "cedric@abonnel.fr",
|
"author": "cedric@abonnel.fr",
|
||||||
"published": true,
|
"published": true,
|
||||||
"published_at": "2023-01-11 17:32:01",
|
"featured": false,
|
||||||
|
"published_at": "2023-01-11 17:32",
|
||||||
"created_at": "2023-01-11 17:32:01",
|
"created_at": "2023-01-11 17:32:01",
|
||||||
"updated_at": "2023-01-11 17:32:01",
|
"updated_at": "2026-05-16 17:26:21",
|
||||||
"revisions": [],
|
"revisions": [
|
||||||
|
{
|
||||||
|
"n": 1,
|
||||||
|
"date": "2026-05-16 17:26:21",
|
||||||
|
"comment": "Contenu modifié, image de couverture modifiée",
|
||||||
|
"title": "En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web"
|
||||||
|
}
|
||||||
|
],
|
||||||
"cover": "cover.png",
|
"cover": "cover.png",
|
||||||
"files_meta": [],
|
"files_meta": [],
|
||||||
"external_links": [],
|
"external_links": [],
|
||||||
"seo_title": "",
|
"seo_title": "",
|
||||||
"seo_description": "",
|
"seo_description": "",
|
||||||
"og_image": "",
|
"og_image": "https://www.abonnel.fr/file?uuid=11055b05-7c03-48f2-b4ad-e978980dba67&name=cover.png",
|
||||||
"category": "Journal geek"
|
"category": "Journal geek",
|
||||||
|
"tags": []
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,41 @@
|
|||||||
|
# En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Les CSP (Content Security Policy) sont des en-têtes HTTP qui permettent de définir les règles de sécurité pour le contenu d'un site Web. Elles sont utilisées pour aider à protéger le site et ses utilisateurs contre diverses attaques de sécurité, telles que l'injection de code malveillant ou la fuite de données sensibles.
|
||||||
|
|
||||||
|
Pour activer CSP, vous devez configurer vos serveurs web afin d'ajouter un en-tête (header) aux réponses. Dans une configuration Apache, en fichier .htaccess ou dans une balise "Location", par exemple :
|
||||||
|
|
||||||
|
```
|
||||||
|
Header always set Content-Security-Policy "default-src 'self'; scriptimg-src 'self' https:**; child-src 'none';"
|
||||||
|
```
|
||||||
|
|
||||||
|
Une autre possibilité consiste à utiliser l'élément HTML `<meta>` pour configurer la règle.
|
||||||
|
|
||||||
|
```
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https:**; child-src 'none';">
|
||||||
|
```
|
||||||
|
|
||||||
|
Il existe de nombreuses directives que vous pouvez utiliser pour définir des règles de sécurité précises afin de :
|
||||||
|
- Empêcher les écoutes du trafic
|
||||||
|
- Réduire des attaques cross site scripting (XSS)
|
||||||
|
|
||||||
|
Voici comment utiliser les CSP dans un site Web.
|
||||||
|
|
||||||
|
Définissez les règles de sécurité que vous souhaitez appliquer à votre site. Par exemple, vous pouvez spécifier quelles sources de contenu (scripts, images, etc.) sont autorisées à être chargées sur votre site. Voir la page du W3C des[directives pour contrôler les ressources que l'agent utilisateur est autorisé à charger pour une page donnée](https:*developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy).
|
||||||
|
|
||||||
|
Ajoutez l'en-tête HTTP `Content-Security-Policy` à votre site. Vous pouvez le faire soit en modifiant le fichier `.htaccess` de votre serveur, soit en ajoutant l'en-tête directement dans le code HTML de votre site.
|
||||||
|
|
||||||
|
Content-Security-Policy: règle
|
||||||
|
|
||||||
|
Définissez la valeur de l'en-tête Content-Security-Policy en spécifiant les règles de sécurité que vous avez définies. Par exemple :
|
||||||
|
|
||||||
|
Content-Security-Policy: default-src 'self'; script-src 'self' https:*example.com; img-src 'self' https:*example.com;
|
||||||
|
|
||||||
|
Cet exemple autorise le chargement de contenu uniquement à partir de la même origine que le site ('self') pour le contenu par défaut (`default-src`) et les scripts (`script-src`), tandis que les images (`img-src`) peuvent être chargées à partir de l'origine du site ou de l'URL `https:*example.com`.
|
||||||
|
|
||||||
|
## Versions, crédits et 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*
|
||||||
Reference in New Issue
Block a user