# style-src-elem (/fr/docs/web-security/policies/content-security-policy/directives/style-src-elem)



La directive `style-src-elem` d'une politique de sécurité du contenu (Content Security Policy, CSP) contrôle quels styles peuvent se charger à travers un bloc `<style>` ou un élément `<link rel="stylesheet">`. Elle ne couvre pas les attributs `style=` inline, ceux-ci relèvent de [`style-src-attr`](/fr/docs/web-security/policies/content-security-policy/directives/style-src-attr). Utilisez `style-src-elem` quand vous voulez que les feuilles de style et les blocs `<style>` suivent une règle différente de celle des attributs `style=`.

Une politique minimale sûre pour cette directive, sans `'unsafe-inline'`:

```http
Content-Security-Policy: style-src-elem 'self' 'nonce-{RANDOM}'
```

## Chaîne de repli [#chaîne-de-repli]

`style-src-elem` se replie sur [`style-src`](/fr/docs/web-security/policies/content-security-policy/directives/style-src), puis sur [`default-src`](/fr/docs/web-security/policies/content-security-policy/directives/default-src). Si vous ne définissez pas `style-src-elem`, les feuilles de style et les blocs `<style>` sont vérifiés contre `style-src`, et si elle est absente, contre `default-src`. Définir `style-src-elem` remplace `style-src` pour ces éléments.

Comme `style-src` couvre déjà les feuilles de style et les blocs `<style>`, la plupart des politiques n'ont pas besoin de `style-src-elem`. Ne l'utilisez que quand les feuilles de style et les attributs `style=` inline doivent diverger.

## Valeurs [#valeurs]

`style-src-elem` accepte les mêmes types de valeurs que `style-src`, ou `'none'`.

| Valeur            | Statut   | Description                                                                     |
| ----------------- | -------- | ------------------------------------------------------------------------------- |
| `'none'`          | ✅ Bon    | Bloque toute feuille de style et tout bloc `<style>`. S'utilise seule.          |
| `'self'`          | ✅ Bon    | Feuilles de style de votre propre origine uniquement.                           |
| Host source       | ✅ Bon    | Un host précis comme `https://fonts.example.com`.                               |
| `https:`          | ✅ Bon    | N'importe quelle origine en TLS. Très large pour des styles.                    |
| `data:`           | ❌ Risqué | Les URL `data:` peuvent transporter des styles contrôlés par un attaquant.      |
| `blob:`           | ❌ Risqué | Les URL `blob:` peuvent transporter des styles contrôlés par un attaquant.      |
| `'nonce-...'`     | ✅ Bon    | Correspond à un élément `<style>` ou `<link>` portant le même attribut `nonce`. |
| `'sha256-...'`    | ✅ Bon    | Empreinte d'un bloc `<style>` inline exact.                                     |
| `'report-sample'` | ✅ Bon    | Ajoute les 40 premiers caractères des styles inline bloqués aux reports.        |
| `'unsafe-inline'` | ❌ Risqué | Autorise tout bloc `<style>` inline, y compris injecté.                         |

Elle accepte:

* Des [sources mots-clés](/fr/docs/web-security/policies/content-security-policy/values/csp-keywords) comme `'self'` et `'unsafe-inline'`.
* Un [nonce ou un hash](/fr/docs/web-security/policies/content-security-policy/values/csp-hashes-nonce) pour autoriser un bloc `<style>` ou une feuille de style `<link>` précis.
* Une [host source](/fr/docs/web-security/policies/content-security-policy/values/csp-host-source) comme `https://fonts.example.com`.
* Une [scheme source](/fr/docs/web-security/policies/content-security-policy/values/csp-scheme-source) comme `https:`.

Un nonce marque un élément `<style>` ou `<link>`, et un hash correspond au contenu textuel exact d'un bloc `<style>` inline. Ajouter l'un ou l'autre fait ignorer `'unsafe-inline'`.

## Exemples [#exemples]

Autoriser les feuilles de style de même origine et un host de polices, avec un nonce pour un bloc inline:

```http
Content-Security-Policy: style-src-elem 'self' https://fonts.example.com 'nonce-r4nd0m'
```

## Usage courant [#usage-courant]

Une configuration typique autorise votre propre origine et un CDN de polices ou de composants pour les feuilles de style, puis traite les attributs `style=` séparément avec [`style-src-attr`](/fr/docs/web-security/policies/content-security-policy/directives/style-src-attr). Quand un framework injecte des blocs `<style>` inline, préférez un nonce ou un hash à `'unsafe-inline'`, voir le guide sur la [suppression de unsafe-inline](/fr/blog/unsafe-inline-csp). L'[évaluateur CSP](/tools/csp-evaluator) indique si `style-src-elem` dépend encore de `'unsafe-inline'`.

## Notes de sécurité [#notes-de-sécurité]

`style-src-elem` bloque les feuilles de style et les blocs `<style>` injectés qui ne correspondent pas à la liste de sources. Ajouter un nonce ou un hash fait ignorer `'unsafe-inline'`, ce qui est précisément ce qui empêche un bloc `<style>` inline injecté de s'appliquer.

* `'unsafe-inline'` autorise tout `<style>` inline, y compris injecté. Remplacez-le par un nonce ou un hash.
* Les blocs `<style>` statiques peuvent être hachés avec le [générateur de hash](/tools/csp-hash).

## Contournements et risques connus [#contournements-et-risques-connus]

Une liste de hosts large laisse des feuilles de style se charger depuis des origines que vous ne contrôlez pas entièrement, et du CSS contrôlé par un attaquant peut servir à des recouvrements de phishing ou à une exfiltration de données par sélecteurs. Gardez la liste serrée.

Une brèche courante consiste à resserrer `style-src-elem` tout en laissant `style-src` (ou `default-src`) permissive pour les attributs `style=`, qui se résolvent toujours via [`style-src-attr`](/fr/docs/web-security/policies/content-security-policy/directives/style-src-attr). Définissez les deux délibérément.

## Recommandation [#recommandation]

Définissez une règle à base de nonce ou de hash sur `style-src` et laissez les feuilles de style et les blocs `<style>` en hériter, sans `'unsafe-inline'`:

```http
Content-Security-Policy: style-src 'self' 'nonce-{RANDOM}'
```

Un seul `style-src` couvre tout ce que fait `style-src-elem`, donc ne prenez `style-src-elem` que quand les feuilles de style et les attributs `style=` doivent suivre des règles différentes. Une fois un nonce ou un hash présent, `'unsafe-inline'` est de toute façon ignoré, donc il n'y a aucune raison de le garder.

## Reporting [#reporting]

Une feuille de style ou un bloc `<style>` bloqué produit un [report csp-violation](/fr/docs/web-security/reporting-api/reports/csp-violation) avec `style-src-elem` comme directive effective. Ajoutez `'report-sample'` pour inclure un court extrait du contenu bloqué. CentralCSP agrège ces reports pour que vous voyiez ce qu'une règle plus stricte casserait.

## Prise en charge par les navigateurs [#prise-en-charge-par-les-navigateurs]

Largement prise en charge par les navigateurs actuels.

## Voir aussi [#voir-aussi]

* [style-src](/fr/docs/web-security/policies/content-security-policy/directives/style-src)
* [style-src-attr](/fr/docs/web-security/policies/content-security-policy/directives/style-src-attr)
* [default-src](/fr/docs/web-security/policies/content-security-policy/directives/default-src)
* [Nonces et hashes](/fr/docs/web-security/policies/content-security-policy/values/csp-hashes-nonce)
* [Évaluateur CSP](/tools/csp-evaluator)

## Sources [#sources]

* [MDN, CSP style-src-elem](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/style-src-elem)
* [W3C, Content Security Policy Level 3](https://www.w3.org/TR/CSP3/)