CSP: style-src

La directive HTTP Content-Security-Policy (CSP) style-src spécifie les sources valides pour des feuilles de style.

Version de CSP 1
Type de directive Fetch directive
default-src fallback Oui, si cette directive est absente, l'agent utilisateur consultera la directive default-src

Syntaxe

Une ou plusieurs sources peuvent être autorisées pour cette directive :

Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src <source> <source>;

Sources

La <source> peut être une des suivantes :

<host-source>
Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un protocole et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque '*'), qui ne peut être utilisée que pour indiquer un sous-domaine ou que tous les ports existants sont des sources valides.
Examples:
  • http://*.example.com: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com via le protocole http:.
  • mail.example.com:443: correspondra à toutes les tentatives d'accès sur le port 443 de mail.example.com.
  • https://store.example.com: correspondra à toutes les tentatives d'accès à store.example.com via le protocole https:.
  • *.example.com: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com en utilisant le protocole courant.
<scheme-source>
Un protocole tel que http: ou https:. Les deux-points sont nécessaires. Contrairement à d'autres valeurs ci-bas, les guillemets ne devraient pas être employés. Vous pouvez aussi spécifier des schémas de données (quoi que ce ne soit pas recommandé).
  • data: permet aux URI data: d'être utilisées comme sources de contenu. Cette pratique manque de sécurité ; une personne malveillante peut aussi injecter des URI data: arbitraires. Utilisez cette valeur avec parcimonie certainement pas pour des scripts.
  • mediastream: permet aux URI mediastream: d'être utilisées comme source de contenu.
  • blob: permet aux URI blob: d'être utilisées comme source de contenu.
  • filesystem: Allows URI filesystem: d'être utilisées comme source de contenu.
'self'
Cette valeur fait référence au domaine dont est originaire le document protégé, y compris le protocole et le numéro de port. Vous devez mettre cette valeur entre guillemets. Certains navigateurs excluent spécifiquement les valeurs blob et filesystem des directives de source. Les sites nécessitant une permission pour ces types de contenu peuvent les spécifier en utilisant l'attribut Data.
'unsafe-eval'
Permet l'usage de la fonction eval() et de méthodes similaires pour créer du code à partir de chaines de caractères. Vous devez mettre cette valeur entre guillemets.
'unsafe-hashes'
Allows enabling specific inline event handlers. If you only need to allow inline event handlers and not inline <script> elements or javascript: URLs, this is a safer method than using the unsafe-inline expression.
'unsafe-inline'
Permet l'usage de ressources embarquées, tels que des éléments <script> (sans src), d'URL javascript:, de gestionnaire d'évènement par attributs (on<eventName>), et d'éléments <style>. Vous devez mettre cette valeur entre guillemets.
'none'
Aucune source n'est admise. Vous devez mettre cette valeur entre guillemets.
'nonce-<base64-value>'
Une liste de permissions pour des scripts embarqués spécifiques en utilisant un nonce (number used once, nombre à usage unique) cryptographique. Le serveur doit générer un nonce à chaque fois qu'il transmet une réponse. Il est extrèmement important de fournir des nonces non prédictibles, puisque le contraire permettrait aisément de contourner la stratégie de sécurité. Voir inline script non fiables pour avoir un exemple. Spécifier un nonce implique que les navigateurs modernes ignoreront la valeur 'unsafe-inline', qui peut toutefois être laissée pour les anciens navigateurs ne supportant pas les nonces.
'<hash-algorithm>-<base64-value>'
Un hash sha256, sha384 ou sha512 d'un <script> ou d'un <style>. L'usage de cette source consiste en deux parties séparées par un tiret : l'algorithme de chiffrage utilisé pour générer le hash à gauche et le hash encodé en base 64 à droite. Lors de la génération du hash, il ne faut pas inclure les balises <script> or <style> et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.). Voir inline script non fiables pour en avoir un exemple. En CSP 2.0, cette valeur ne s'applique qu'aux scripts embarqués. CSP 3.0 le permet aussi dans le cas de scripts externes.

Exemples

Cas de violation

Soit cet en-tête CSP :

Content-Security-Policy: style-src https://example.com/

Ces feuilles de style seront bloquées et ne se chargeront pas :

<link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" />

<style>
#inline-style { background: red; }
</style>

<style>
  @import url("https://not-example.com/styles/print.css") print;
</style>

De même que les styles chargés avec l'en-tête Link :

Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet

Les attributes de style seront aussi bloqués :

<div style="display:none">Foo</div>

De même que les styles ajoutés par JavaScript en définissant l'attribut style directement, ou en définissant la propriété cssText :

document.querySelector('div').setAttribute('style', 'display:none;');
document.querySelector('div').style.cssText = 'display:none;';

Toutefois, les propriétés de styles qui sont définies directement dans l'attribut style ne seront pas bloquées, permettant aux utilisateurs de manipuler sainement les styles avec JavaScript :

document.querySelector('div').style.display = 'none';

Ce genre de manipulations peut être bloqué en désactivant JavaScript au moyen de la directive CSP script-src.

Styles embarqués non fiables

Note : Bloquer les styles et scripts embarqués est l'une des stratégies de sécurité majeures que CSP propose. Toutefois, si vous en avez absolument besoin, il existe des mécanismes qui vous permettront de les autoriser.

Vous pouvez autoriser les styles embarqués en spécifiant la valeur 'unsafe-inline', des nonces ou des hashs correspondant à la feuille de style.

Content-Security-Policy: style-src 'unsafe-inline';

Cette directive CSP autorisera toutes les feuilles de styles embarquées telles que l'élément <style> et l'attribut style sur tous les éléments :

<style>
#inline-style { background: red; }
</style>

<div style="display:none">Foo</div>

Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments <style> :

Content-Security-Policy: style-src 'nonce-2726c7f26c'

Vous devrez alors définir ce nonce sur l'élément <style> :

<style nonce="2726c7f26c">
#inline-style { background: red; }
</style>

Autrement, vous pourrez créer des hashs à partir de vos feuilles de styles. CSP accepte les algorithmes sha256, sha384 et sha512.

Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'

Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.).

<style>#inline-style { background: red; }</style>

Style non fiables

La valeur 'unsafe-eval' contrôle différente méthodes de mise en page qui créent des déclarations de style à partir de chaines de caractères. Si 'unsafe-eval' n'est pas spécifiée avec la directive style-src, ces méthodes seront bloquées et n'auront aucun effet :

Spécifications

Specification Status Comment
Content Security Policy Level 3
La définition de 'style-src' dans cette spécification.
Version de travail Inchangé.
Content Security Policy Level 2
La définition de 'style-src' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
style-srcChrome Support complet 25Edge Support complet 14Firefox Support complet 23IE Aucun support NonOpera Support complet 15Safari Support complet 7WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 23Opera Android ? Safari iOS Support complet 7Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi