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



The `style-src-elem` directive in a Content Security Policy (CSP) controls which styles can load through a `<style>` block or a `<link rel="stylesheet">` element. It does not cover inline `style=` attributes, those belong to [`style-src-attr`](/en/docs/web-security/policies/content-security-policy/directives/style-src-attr). Use `style-src-elem` when you want stylesheets and `<style>` blocks to follow a different rule than `style=` attributes.

A minimal safe policy for this directive, with no `'unsafe-inline'`:

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

## Fallback chain [#fallback-chain]

`style-src-elem` falls back to [`style-src`](/en/docs/web-security/policies/content-security-policy/directives/style-src), then to [`default-src`](/en/docs/web-security/policies/content-security-policy/directives/default-src). If you do not set `style-src-elem`, stylesheets and `<style>` blocks are checked against `style-src`, and if that is absent, against `default-src`. Setting `style-src-elem` replaces `style-src` for these elements.

Because `style-src` already covers stylesheets and `<style>` blocks, most policies do not need `style-src-elem`. Reach for it only when stylesheets and inline `style=` attributes should diverge.

## Values [#values]

`style-src-elem` takes the same value kinds as `style-src`, or `'none'`.

| Value             | Status  | Description                                                                  |
| ----------------- | ------- | ---------------------------------------------------------------------------- |
| `'none'`          | ✅ Good  | Blocks every stylesheet and `<style>` block. Used alone.                     |
| `'self'`          | ✅ Good  | Stylesheets from your own origin only.                                       |
| Host source       | ✅ Good  | A specific host such as `https://fonts.example.com`.                         |
| `https:`          | ✅ Good  | Any origin over TLS. Very broad for styles.                                  |
| `data:`           | ❌ Risky | `data:` URLs can carry attacker-controlled styles.                           |
| `blob:`           | ❌ Risky | `blob:` URLs can carry attacker-controlled styles.                           |
| `'nonce-...'`     | ✅ Good  | Matches a `<style>` or `<link>` element carrying the same `nonce` attribute. |
| `'sha256-...'`    | ✅ Good  | Digest of an exact inline `<style>` block.                                   |
| `'report-sample'` | ✅ Good  | Adds the first 40 characters of blocked inline styles to reports.            |
| `'unsafe-inline'` | ❌ Risky | Allows every inline `<style>` block, including injected ones.                |

It accepts:

* [Keyword sources](/en/docs/web-security/policies/content-security-policy/values/csp-keywords) such as `'self'` and `'unsafe-inline'`.
* A [nonce or hash](/en/docs/web-security/policies/content-security-policy/values/csp-hashes-nonce) to allow a specific `<style>` block or `<link>` stylesheet.
* A [host source](/en/docs/web-security/policies/content-security-policy/values/csp-host-source) such as `https://fonts.example.com`.
* A [scheme source](/en/docs/web-security/policies/content-security-policy/values/csp-scheme-source) such as `https:`.

A nonce tags a `<style>` or `<link>` element, and a hash matches the exact text content of an inline `<style>` block. Adding either makes `'unsafe-inline'` ignored.

## Examples [#examples]

Allow same-origin stylesheets and a font host, with a nonce for one inline block:

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

## Common use [#common-use]

A typical setup allows your own origin and a font or component CDN for stylesheets, then handles `style=` attributes separately with [`style-src-attr`](/en/docs/web-security/policies/content-security-policy/directives/style-src-attr). Where a framework injects inline `<style>` blocks, prefer a nonce or hash over `'unsafe-inline'`, see the how-to on [removing unsafe-inline](/en/blog/unsafe-inline-csp). The [CSP evaluator](/tools/csp-evaluator) reports whether `style-src-elem` still depends on `'unsafe-inline'`.

## Security notes [#security-notes]

`style-src-elem` blocks injected stylesheets and `<style>` blocks that do not match the source list. Adding a nonce or hash makes `'unsafe-inline'` ignored, which is what stops an injected inline `<style>` block from applying.

* `'unsafe-inline'` allows any inline `<style>`, including injected ones. Replace it with a nonce or hash.
* Static `<style>` blocks can be hashed with the [hash generator](/tools/csp-hash).

## Known bypasses and risks [#known-bypasses-and-risks]

A broad host allowlist lets stylesheets load from origins you do not fully control, and attacker-controlled CSS can be used for phishing overlays or selector-based data exfiltration. Keep the list tight.

A common gap is tightening `style-src-elem` while leaving `style-src` (or `default-src`) permissive for `style=` attributes, which still resolve through [`style-src-attr`](/en/docs/web-security/policies/content-security-policy/directives/style-src-attr). Set both deliberately.

## Recommendation [#recommendation]

Set a nonce or hash based rule on `style-src` and let stylesheets and `<style>` blocks inherit it, without `'unsafe-inline'`:

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

A single `style-src` covers everything `style-src-elem` does, so reach for `style-src-elem` only when stylesheets and `style=` attributes must follow different rules. Once a nonce or hash is present, `'unsafe-inline'` is ignored anyway, so there is no reason to keep it.

## Reporting [#reporting]

A blocked stylesheet or `<style>` block produces a [csp-violation report](/en/docs/web-security/reporting-api/reports/csp-violation) with `style-src-elem` as the effective directive. Add `'report-sample'` to include a short sample of the blocked content. CentralCSP aggregates these reports so you can see what a stricter rule would break.

## Browser support [#browser-support]

Widely supported across current browsers.

## See also [#see-also]

* [style-src](/en/docs/web-security/policies/content-security-policy/directives/style-src)
* [style-src-attr](/en/docs/web-security/policies/content-security-policy/directives/style-src-attr)
* [default-src](/en/docs/web-security/policies/content-security-policy/directives/default-src)
* [Nonces and hashes](/en/docs/web-security/policies/content-security-policy/values/csp-hashes-nonce)
* [CSP evaluator](/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/)