Content-Security-Policy : directive style-src

Syntaxe

Content-Security-Policy: style-src 'none';
Content-Security-Policy: style-src <source-expression-list>;

Cette directive peut avoir l'une des valeurs suivantes :

'none'

Aucune ressource de ce type ne peut être chargée. Les guillemets simples sont obligatoires.

<source-expression-list>

Une liste de valeurs d'expressions de source séparées par des espaces. Les ressources de ce type peuvent être chargées si elles correspondent à l'une des expressions de source données. Pour cette directive, les valeurs d'expression de source suivantes sont applicables :

• <host-source>
• <scheme-source>
• 'self'
• 'unsafe-inline'
• 'unsafe-hashes'
• 'nonce-<nonce_value>'
• '<hash_algorithm>-<hash_value>'
• 'report-sample'

Notez que la spécification inclut également 'unsafe-eval' comme valeur d'expression de source valide, afin de permettre les méthodes CSSOM qui analysent et insèrent des chaînes de caractères CSS, y compris les méthodes insertRule() et les accesseurs cssText sur diverses interfaces, telles que CSSStyleSheet.insertRule() et CSSStyleDeclaration.cssText. Cependant, aucun navigateur ne bloque actuellement ces méthodes, il n'est donc pas nécessaire d'appliquer unsafe-eval.

Exemples

Cas de violation

Soit cet en-tête CSP :

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

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

<link href="https://hors-exemple.com/styles/main.css" rel="stylesheet" />

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

<style>
  @import "https://hors-exemple.com/styles/print.css" print;
</style>

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

Link: <https://hors-exemple.com/styles/stylesheet.css>;rel=stylesheet

Les attributs de style seront aussi bloqués :

<div style="display:none">Toto</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 la propriété style de l'élément ne seront pas bloquées, permettant aux utilisateur·ice·s 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

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

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

L'élément HTML <style> suivant et l'attribut style seront autorisés par la politique :

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

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

Vous pouvez utiliser une source de nonce pour n'autoriser que certains blocs de styles embarqués. Vous devez générer une valeur unique aléatoire (en utilisant un générateur de jetons aléatoires cryptographiquement sécurisé) et l'inclure dans la politique. Il est important de noter que cette valeur unique doit être générée dynamiquement car elle doit être unique pour chaque requête HTTP :

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

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

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

Vous pouvez aussi créer des hachages à partir de vos styles embarqués. CSP prend en charge sha256, sha384 et sha512. La forme binaire de l'empreinte doit être encodée en base64. Vous pouvez obtenir l'empreinte d'une chaîne de caractères en ligne de commande avec le programme openssl :

echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64

On peut utiliser un hachage pour la source afin d'autoriser uniquement certains blocs pour les styles embarqués :

Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='

Lorsque vous générez le hachage, ne pas inclure les balises <style> et notez que la casse et les espaces comptent, y compris les espaces en début ou en fin de ligne.

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'en-tête Content-Security-Policy
• La directive CSP style-src-elem
• La directive CSP style-src-attr
• L'en-tête Link
• L'élément HTML <style>, <link>
• La règle CSS @import
• La méthode API CSSStyleSheet.insertRule()
• La méthode API CSSGroupingRule.insertRule()
• La propriété API CSSStyleDeclaration.cssText