Accueil/En-têtes/Content-Security-PolicyContent-Security-PolicyUtilisation L’en-tête Content-Security-Policy (CSP) donne aux administrateurs de site un contrôle fin sur le chargement des ressources. En déclarant une politique, le serveur demande au navigateur de ne charger scripts, styles, images, polices et autres ressources qu’à partir de sources approuvées. Toute ressource ne correspondant pas à la politique est bloquée, et le navigateur signale la violation. Une politique se compose d’une ou plusieurs directives séparées par des points-virgules. Chaque directive nomme un type de ressource et liste les sources autorisées pour ce type de ressource. Content-Security-Policy: <directive> <source>; <directive> <source> Déployer d’abord une nouvelle politique en mode rapport seul est une pratique courante. L’en-tête Content-Security-Policy-Report-Only utilise la même syntaxe, mais journalise les violations sans bloquer les ressources, ce qui permet aux administrateurs de tester une politique avant de l’appliquer. Directives Fetch Les directives Fetch contrôlent les emplacements depuis lesquels des types de ressources précis sont chargés. default-src La directive default-src sert de repli pour toutes les autres directives fetch. Lorsqu’une directive fetch spécifique est absente, le navigateur se rabat sur default-src. Content-Security-Policy: default-src 'self' script-src La directive script-src restreint les sources d’exécution de JavaScript. Les listes d’autorisation fondées sur un nonce ou un hash offrent une protection plus solide que les règles fondées sur l’hôte. script-src-elem La directive script-src-elem s’applique spécifiquement aux éléments script-src-attr La directive script-src-attr régit les gestionnaires d’événements en ligne comme onclick et onload, indépendamment du chargement des éléments style-src La directive style-src indique les sources valides pour les feuilles de style CSS, y compris les styles en ligne et les liens vers des feuilles de style externes. style-src-elem La directive style-src-elem s’applique aux éléments style-src-attr La directive style-src-attr régit les styles en ligne appliqués directement aux éléments du DOM via l’attribut style. img-src La directive img-src indique les sources valides pour les images et les favicons. connect-src La directive connect-src restreint les URL accessibles par les interfaces de script, notamment fetch(), XMLHttpRequest, WebSocket et EventSource. font-src La directive font-src indique les sources valides pour les polices chargées via @font-face. frame-src La directive frame-src indique les sources valides pour les contextes de navigation imbriqués chargés par les éléments et . media-src La directive media-src indique les sources valides pour les éléments , et . object-src La directive object-src restreint les sources des éléments et ( est un élément hérité retiré de la spécification HTML). Il est recommandé de lui donner la valeur ‘none’, ces éléments étant rarement nécessaires. child-src La directive child-src définit les sources autorisées pour les web workers et les contextes de navigation imbriqués. Les directives plus spécifiques frame-src et worker-src supplantent child-src lorsqu’elles sont présentes. worker-src La directive worker-src s’applique aux scripts Worker, SharedWorker et ServiceWorker. manifest-src La directive manifest-src indique les sources valides pour les fichiers de manifeste d’application web. fenced-frame-src La directive fenced-frame-src indique les sources valides pour les contextes de navigation imbriqués chargés dans les éléments . En son absence, le navigateur se rabat sur frame-src, puis sur default-src. Directives Document Les directives Document régissent les propriétés de l’environnement du document. base-uri La directive base-uri restreint les URL autorisées dans l’élément , empêchant un attaquant de modifier l’URL de base des liens relatifs. sandbox La directive sandbox applique à la page des restrictions semblables à celles de l’attribut sandbox de . Les pages placées en bac à sable perdent l’accès aux scripts, aux formulaires, aux fenêtres surgissantes et à d’autres fonctionnalités, sauf réactivation explicite par les drapeaux sandbox. Directives Navigation Les directives Navigation contrôlent les destinations vers lesquelles les utilisateurs et les formulaires envoient des requêtes. form-action La directive form-action restreint les URL acceptées comme cibles de soumission de formulaire. frame-ancestors La directive frame-ancestors indique les parents autorisés à intégrer la page au moyen de , , <object> ou <embed> (l’élément <applet> a été retiré de la spécification HTML). Définir frame-ancestors ‘none’ remplace l’en-tête X-Frame-Options: DENY. navigate-to La directive navigate-to avait été proposée pour restreindre les URL vers lesquelles le document est autorisé à naviguer, quel que soit le mécanisme. Cette directive a été retirée de la spécification CSP Level 3 et n’a jamais été livrée dans un navigateur de production. Directives Reporting Les directives Reporting contrôlent le comportement de signalement des violations. report-to La directive report-to indique le nom d’un groupe de signalement défini par l’en-tête Reporting-Endpoints. Les rapports de violation sont envoyés au point d’accès associé au groupe nommé. report-uri La directive report-uri envoie les rapports de violation à une URL donnée. Cette directive est en cours de remplacement par report-to, mais reste largement déployée pour des raisons de rétrocompatibilité. upgrade-insecure-requests La directive upgrade-insecure-requests demande au navigateur de traiter toutes les URL HTTP de la page comme des URL HTTPS. C’est précieux lors d’une migration de HTTP vers HTTPS, lorsque de nombreuses ressources référencent encore des URL non sécurisées. require-trusted-types-for La directive require-trusted-types-for impose les politiques Trusted Types aux points d’injection XSS du DOM, en exigeant des objets typés plutôt que des chaînes de caractères. trusted-types La directive trusted-types définit une liste d’autorisation de noms de politiques Trusted Types, limitant les politiques que la page peut créer. Valeurs de source Les directives acceptent des expressions de source définissant les emplacements de chargement des ressources. ‘self’ Correspond à l’origine courante (même schéma, même hôte et même port). N’inclut pas les sous-domaines. ‘none’ Bloque toutes les sources pour la directive. Aucune ressource du type indiqué n’est chargée. ‘unsafe-inline’ Autorise les éléments ‘unsafe-eval’ Autorise l’évaluation dynamique de code via eval(), Function() et constructions analogues. ‘unsafe-hashes’ Autorise certains gestionnaires d’événements en ligne identifiés par leur hash, sans activer l’ensemble des scripts en ligne. ‘strict-dynamic’ Étend la confiance aux scripts chargés par un script déjà approuvé. Combiné à des politiques fondées sur un nonce, cela évite d’avoir à inscrire individuellement chaque hôte de script dans la liste d’autorisation. ‘nonce-*’ Un nonce cryptographique (nombre utilisé une seule fois) généré par le serveur pour chaque réponse. La valeur du nonce dans la politique correspond à l’attribut nonce porté par les éléments Content-Security-Policy: script-src 'nonce-abc123' ‘sha256-’, ‘sha384-’, ‘sha512-*’ Un hash du contenu du script ou du style en ligne. Le navigateur calcule le hash de chaque bloc en ligne et compare le résultat aux hash figurant dans la liste d’autorisation. host-source Un motif d’hôte ou d’URL indiquant les origines autorisées. Prend en charge les jokers de sous-domaine (*.example.re), les ports précis (example.re:443) et les préfixes de chemin (example.re/scripts/). scheme-source Un schéma tel que https: ou data: autorisant toutes les ressources servies via le protocole nommé. ‘report-sample’ Le mot-clé ‘report-sample’, ajouté à une valeur de script-src ou de style-src, demande au navigateur d’inclure un court extrait du code fautif dans le rapport de violation. Cela aide à localiser le script ou le style en ligne en cause. Exemple Une politique restrictive n’autorisant que les ressources de la même origine bloque tous les scripts en ligne et tout chargement de ressource externe. Content-Security-Policy: default-src 'self' Une politique comportant des règles distinctes pour les scripts et les images. Les scripts ne se chargent que depuis la même origine, tandis que les images peuvent également provenir d’un CDN d’images dédié. Content-Security-Policy: default-src 'self'; img-src 'self' images.example.re Une politique fondée sur un nonce pour les scripts. Chaque chargement de page génère un nonce inédit, et seuls les éléments Content-Security-Policy: script-src 'nonce-r4nd0m'; style-src 'self' Une politique combinant ‘strict-dynamic’ et un nonce. Les scripts approuvés peuvent librement charger d’autres scripts sans inscription individuelle des hôtes dans la liste d’autorisation. Content-Security-Policy: script-src 'strict-dynamic' 'nonce-r4nd0m' Une politique qui signale les violations à un point d’accès à des fins de surveillance tout en appliquant les règles. Content-Security-Policy: default-src 'self'; report-to csp-violations Dépannage Les violations de CSP apparaissent dans la console du navigateur sous forme de messages « Refused to… », accompagnés de l’URI de la ressource bloquée et de la directive à l’origine du blocage. Scripts en ligne bloqués après l’ajout d’une CSP. Le navigateur journalise Refused to execute inline script because it violates the following Content Security Policy directive: “script-src …”. La politique par défaut bloque tous les éléments Styles en ligne bloqués. La console affiche Refused to apply inline style lorsque style-src ne contient ni ‘unsafe-inline’ ni un nonce/hash correspondant. Les frameworks qui injectent des styles à l’exécution déclenchent cette violation. Ajoutez un nonce à style-src, ou utilisez ‘unsafe-inline’ le temps de passer à des styles fondés sur un nonce. Ressource externe bloquée parce que le domaine est absent de la directive. Une erreur Refused to load the script ou Refused to connect signifie que l’origine de la ressource n’est pas listée dans la directive concernée. Ouvrez la console du navigateur, identifiez l’origine bloquée à partir du message de violation, puis ajoutez cette origine à la bonne directive (script-src, img-src, connect-src, etc.). Vérifiez également default-src, puisque les directives absentes se rabattent sur la valeur par défaut. eval() bloqué par défaut. Les bibliothèques reposant sur eval(), new Function() ou des compilateurs de gabarits déclenchent Refused to evaluate a string as JavaScript. Ajouter ‘unsafe-eval’ à script-src rétablit la fonctionnalité, mais affaiblit la politique. Mieux vaut refactoriser le code pour éviter eval() lorsque c’est possible. Google Tag Manager ou scripts analytiques cassés par la CSP. Les gestionnaires de balises injectent des scripts dynamiquement, et chaque script injecté nécessite soit un nonce, soit une entrée d’hôte dans la liste d’autorisation. Ajoutez le domaine GTM (https://www.googletagmanager.com) à script-src, ainsi que https://www.google-analytics.com à connect-src et img-src. Pour les politiques fondées sur un nonce, utilisez ‘strict-dynamic’ afin que les scripts chargés par un script GTM approuvé héritent de la confiance sans entrées d’hôte individuelles. Déboguer les violations dans la console du navigateur. Ouvrez les DevTools et consultez l’onglet Console pour y trouver les messages de violation CSP. Chaque message indique l’URI bloqué, la directive enfreinte et la politique complète. Dans Chrome, l’onglet Network marque les requêtes bloquées par un statut (blocked:csp). Firefox fournit un niveau de détail comparable dans les panneaux Console et Network. Tester une politique sans risque avec le mode Report-Only. Déployez d’abord la politique au moyen de l’en-tête Content-Security-Policy-Report-Only. Il journalise les violations sans bloquer la moindre ressource. Surveillez les rapports de violation, corrigez les sources manquantes, puis basculez vers l’en-tête Content-Security-Policy appliqué une fois le flux de rapports propre.