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
|
||||
|
||||
|
||||
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 :
|
||||
|
||||
```
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https:**; child-src 'none';">
|
||||
```html
|
||||
<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 :
|
||||
- Empêcher les écoutes du trafic
|
||||
- Réduire des attaques cross site scripting (XSS)
|
||||
> 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.
|
||||
|
||||
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
|
||||
- [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)
|
||||
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*
|
||||
@@ -4,15 +4,24 @@
|
||||
"title": "En-têtes HTTP : CSP ou comment sécuriser le contenu d'un site web",
|
||||
"author": "cedric@abonnel.fr",
|
||||
"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",
|
||||
"updated_at": "2023-01-11 17:32:01",
|
||||
"revisions": [],
|
||||
"updated_at": "2026-05-16 17:26:21",
|
||||
"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",
|
||||
"files_meta": [],
|
||||
"external_links": [],
|
||||
"seo_title": "",
|
||||
"seo_description": "",
|
||||
"og_image": "",
|
||||
"category": "Journal geek"
|
||||
"og_image": "https://www.abonnel.fr/file?uuid=11055b05-7c03-48f2-b4ad-e978980dba67&name=cover.png",
|
||||
"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