Qu'est-ce que la Content Security Policy (CSP) ?
Content Security Policy (CSP) est un mécanisme de sécurité qui permet aux administrateurs de contrôler les ressources qu’un navigateur est autorisé à charger pour une page donnée. En d’autres termes, CSP vous permet de spécifier quelles origines sont autorisées pour les scripts, les images, les styles et autres ressources.
Comment configurer la Content Security Policy avec l'en-tête HTTP ?
Vous pouvez configurer CSP en ajoutant l’en-tête HTTP Content-Security-Policy
à votre serveur web. Cela s’appliquera à toutes les pages du site. Par exemple :
Content-Security-Policy: default-src 'self'; img-src https://*; script-src 'self' https://example.com;
Cette politique autorise les ressources du même domaine 'self'
, les images via HTTPS img-src https://*
, et les scripts uniquement depuis le domaine example.com
.
La directive default-src 'self'
indique que toutes les ressources (y compris JavaScript, CSS, images, etc.) doivent provenir du domaine de la page elle-même (c'est-à-dire de la même origine). Cependant, cela n'autorise pas les scripts inline comme le JavaScript directement dans le HTML. Pour autoriser le JavaScript inline, il faudrait ajouter une exception dans la politique CSP.
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline';
L'option 'unsafe-inline'
permet d'autoriser les scripts inline, mais cela peut rendre le site vulnérable aux attaques de type Cross-Site Scripting (XSS), ce qui est généralement déconseillé.
Pour éviter l'usage de 'unsafe-inline'
, une meilleure solution est d'utiliser des hashes ou des nonces pour autoriser des scripts inline spécifiques de manière sécurisée.
Comment configurer la Content Security Policy avec la balise meta ?
Si vous préférez définir la politique CSP au niveau de la page, utilisez l’élément <meta>
dans le HTML. Par exemple :
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; script-src 'self' https://example.com;">
Principales directives de la Content Security Policy
Voici quelques directives courantes :
default-src |
Définit la source par défaut pour tous les types de ressources. |
child-src |
Définit les sources valides pour les ressources des éléments <frame> et <iframe> , ainsi que pour les web workers (scripts exécutés en arrière-plan) |
script-src |
Définit les sources valides pour les fichiers JavaScript |
img-src |
Définit les sources valides pour les images et les favicons |
media-src |
Définit les sources valides pour les ressources média des éléments <audio> et <video> |
font-src |
Définit les sources valides pour les polices de caractères chargées depuis @font-face |
object-src |
Définit les sources valides pour les ressources des éléments |
style-src |
Définit les sources valides pour les feuilles de styles |