style-src
Thestyle-src
directive controls which CSS sources can be loaded and executed in your web application. It's a crucial CSP directive that helps prevent CSS-based attacks and ensures that only trusted styles are applied to your application.
Recommended Values
'self' Allows the resource to be loaded and executed
https://subdomain.domain.com/path Allows the resource to be loaded and executed
'sha256-<hash>' Allows the resource to be loaded and executed
'nonce-<random>' Allows the resource to be loaded and executed
Recommended style-src configuration
Content-Security-Policy: style-src 'self' https://trusted-cdn.com;
Relationship with style-src-elem and style-src-attr
Thestyle-src
directive is a shorthand that encompasses both style-src-elem
and style-src-attr
directives:
style-src-elem
controls the loading and execution of<style>
elements and<link rel="stylesheet">
elementsstyle-src-attr
specifically controls inline style attributes (likestyle="..."
)- If either of these more specific directives is not specified, the browser falls back to the rules specified in
style-src
- Allow external stylesheets from trusted CDNs via
style-src-elem
- Block all inline styles via
style-src-attr
- Or create other combinations based on your security requirements
Tips & Tricks
The nonce value must be unique for each request and must be the same as the one specified in the Content-Security-Policy header.
Hashes can be used to allow specific inline styles. See the values section for more information.
Do not use 'unsafe-inline' as it may introduce security vulnerabilities. Use with caution.
Using broad keywords like 'data:' 'blob:' 'http:' 'https:' is too permissive and may introduce security vulnerabilities. Use with caution.
Possible Values
'none'
: No styles are allowed'self'
: Only styles from the same origin are allowed'report-sample'
: Includes a sample of the violating code in violation reports- Nonces:
'nonce-<random>'
for specific inline styles - Hashes:
'sha256-<hash>'
for specific inline styles - URLs: Specific domains (e.g.,
https://trusted-cdn.com
) - Schemes: Protocol schemes (e.g.,
https:
) - ⚠️
'unsafe-inline'
: Allows inline styles (insecure)
Example Configurations
Example policy with nonce
CSP Header with nonce
Content-Security-Policy: style-src 'self' 'nonce-random123' https://trusted-cdn.com;
Allowed
<!-- allowed as it has the correct nonce -->
<style nonce="random123">body { color: blue; }</style>
<!-- allowed as it's from trusted-cdn.com -->
<link rel="stylesheet" href="https://trusted-cdn.com/styles.css">
<!-- allowed as it's from same origin -->
<link rel="stylesheet" href="/styles.css">
<!-- allowed as it has the correct nonce -->
<div style="color: red;" nonce="random123">Styled content</div>
Blocked
<!-- blocked as it has no nonce -->
<style>body { color: red; }</style>
<!-- blocked as it has wrong nonce -->
<style nonce="wrong">body { color: red; }</style>
<!-- blocked as the domain is not authorized -->
<link rel="stylesheet" href="https://malicious.com/styles.css">
<!-- blocked as it has no nonce -->
<div style="color: red;">Styled content</div>
Additional Information
- The
style-src
directive is important for preventing CSS-based attacks - Consider using nonces or hashes instead of
'unsafe-inline'
for better security - Be careful when allowing external stylesheets as they can potentially leak information
- The
style-src
directive affects both<style>
elements and<link rel="stylesheet">
elements
Related Resources
External Articles
- MDN Web Docs: style-src
- OWASP: Content Security Policy Cheat Sheet
- Google Web Fundamentals: Content Security Policy