style-src-elem
The CSP style-src-elem directive controls stylesheets and style blocks. See its fallback chain, values, examples, and risks.
Last update:
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. 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':
Content-Security-Policy: style-src-elem 'self' 'nonce-{RANDOM}'Fallback chain
style-src-elem falls back to style-src, then to 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
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 such as
'self'and'unsafe-inline'. - A nonce or hash to allow a specific
<style>block or<link>stylesheet. - A host source such as
https://fonts.example.com. - A 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
Allow same-origin stylesheets and a font host, with a nonce for one inline block:
Content-Security-Policy: style-src-elem 'self' https://fonts.example.com 'nonce-r4nd0m'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. Where a framework injects inline <style> blocks, prefer a nonce or hash over 'unsafe-inline', see the how-to on removing unsafe-inline. The CSP evaluator reports whether style-src-elem still depends on 'unsafe-inline'.
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.
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. Set both deliberately.
Recommendation
Set a nonce or hash based rule on style-src and let stylesheets and <style> blocks inherit it, without 'unsafe-inline':
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
A blocked stylesheet or <style> block produces a csp-violation report 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
Widely supported across current browsers.