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

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 (en-US) :

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

BCD tables only load in the browser

Voir aussi