style-src-elem
style-src-elem
style-src-elem
The style-src-elem directive specifies valid sources for stylesheets loaded using <style> elements and <link> elements with rel="stylesheet".
Recommended Values
'self'
Allows stylesheets from the same origin
Allows stylesheets from the same origin
nonce-<random>
Allows stylesheets with a specific nonce value
Allows stylesheets with a specific nonce value
sha256-<hash>
Allows stylesheets with a specific hash
Allows stylesheets with a specific hash
domain.example
Allows stylesheets from a specific domain
Allows stylesheets from a specific domain
Explore detailed value definitions
Tips & Tricks
If style-src-elem is not set, the user agent will look for style-src, and if that is not set, default-src is used.
Using 'unsafe-inline' allows all inline styles and may introduce security risks. Consider using nonces or hashes instead.
Examples
Allows stylesheets from the same origin, a specific domain, and with a nonce
Content-Security-Policy: style-src-elem 'self' 'nonce-2726c7f26c' https://cdn.example.com;Allowed
<!-- allowed by 'self' --> <link rel="stylesheet" href="/styles/main.css"> <!-- allowed by nonce --> <style nonce="2726c7f26c">body {background-color: #f0f0f0;}</style> <!-- allowed by cdn.example.com --> <link rel="stylesheet" href="https://cdn.example.com/framework.css">Blocked
<!-- blocked as no 'unsafe-inline' and no matching nonce --> <style>p {color: red;}</style> <!-- blocked as domain not in allowed list --> <link rel="stylesheet" href="https://cdn.otherdomain.com/styles.css">
Frequently Asked Questions
What is the style-src-elem directive used for?
The style-src-elem directive controls which style elements and external stylesheets can be loaded in your application. It specifically governs <style> elements and <link rel='stylesheet'> elements, providing granular control over stylesheet sources separate from inline styles.
Default Behavior
If style-src-elem is not specified, the browser will use style-src's value. If style-src is also not specified, it falls back to default-src.
What are common values for style-src-elem?
Common values include 'self' to allow stylesheets only from your own domain, specific URLs for trusted CDNs, 'unsafe-inline' to allow <style> elements (though not recommended), and nonces/hashes for specific trusted style elements. For example: style-src-elem 'self' https://cdn.example.com
Security Note
When using external stylesheet sources, ensure they are trusted and served over HTTPS to prevent style injection attacks.
How does style-src-elem differ from style-src and style-src-attr?
While style-src is a general directive for all styles, style-src-elem specifically controls <style> elements and external stylesheets, and style-src-attr controls inline style attributes. This separation allows for precise policies like allowing external stylesheets while blocking inline styles completely.
Best Practice
For better security, consider using style-src-elem with specific trusted sources and avoiding 'unsafe-inline'. Use external stylesheets from verified sources instead of inline styles.
Need to monitor CSP violations and maintain it easily?
Set up a reporting endpoint to monitor Content Security Policy violations in real-time to build and maintain your CSP easily.
Set up your endpoint now