style-src
style-src
style-src
The style-src directive specifies the sources from which stylesheets can be loaded.
Recommended Values
'self'
Allows styles from the same origin
Allows styles from the same origin
https://subdomain.domain.com
Allows styles from a specific external site
Allows styles from a specific external site
nonce-<random>
Allows styles with a specific nonce value
Allows styles with a specific nonce value
sha256-<hash>
Allows styles with a specific hash
Allows styles with a specific hash
Explore detailed value definitions
Tips & Tricks
To allow inline styles, 'unsafe-inline', a nonce-source or a hash-source that matches the inline block can be specified.
It is recommended using a nonce-source or hash instead of hashes to allow specific styles as it will be easier to maintain.
Using 'unsafe-inline' is not recommended as it allows all inline styles, which can be a security risk. Consider using nonces or hashes instead.
Available Values
'none'
Blocks all style sources
Blocks all style sources
'self'
Allows styles from the same origin
Allows styles from the same origin
'sha256-<hash>'
Allows styles matching a specific hash
Allows styles matching a specific hash
https://example.com
Allows loading styles from specific origins
Allows loading styles from specific origins
'report-sample'
Requires the first 40 characters of the blocked style to be included in violation reports
Requires the first 40 characters of the blocked style to be included in violation reports
'unsafe-inline'
Allows inline styles and style attributes (not recommended)
Allows inline styles and style attributes (not recommended)
Examples
Allows stylesheets from the same origin, a specific external site, and with a nonce
Content-Security-Policy: style-src 'self' https://example.com 'nonce-2726c7f26c';Allowed
<!-- allowed by 'self' --> <link rel='stylesheet' href='/css/style.css'> <!-- allowed by https://example.com --> <link rel='stylesheet' href='https://example.com/css/style.css'> <!-- allowed by nonce --> <style nonce="2726c7f26c"> inline-style {background: red;} </style> <!-- allowed by 'self' --> <div style="display:none">Foo</div>Blocked
<!-- blocked as the domain is not authorized --> <link href="https://malicious.website.com/styles/main.css" rel="stylesheet" type="text/css" /> <!-- blocked as the domain is not authorized and no nonce --> <style> @import url("https://malicious.website.com/styles/sheet.css") ; </style> <!-- blocked as the domain is not authorized --> <link> href="https://malicious.website.com/styles/stylesheet.css" rel="stylesheet" type="text/css" />
Frequently Asked Questions
What is the style-src directive used for?
The style-src directive controls which styles (CSS) can be applied to your document. This includes both external stylesheets and inline styles. It helps prevent injection of malicious styles that could be used for the UI redressing attacks or data exfiltration.
Default Behavior
If style-src is not specified, the browser falls back to default-src for style loading permissions.
What are common values for style-src?
Common values include 'self' to allow styles only from your domain, specific CDN domains for external stylesheets. For example: style-src 'self' https://cdn.example.com. Using nonces or hashes is recommended over 'unsafe-inline' for inline styles.
Security Note
Using 'unsafe-inline' with style-src can be dangerous as it allows any inline styles. Consider using nonces or hashes for better security.
How does style-src affect dynamic styles?
style-src affects both static and dynamic styles, including those added via JavaScript's style property or insertRule(). When using frameworks that dynamically generate styles, you may need to allow a specific sources or use nonces/hashes to ensure proper functionality.
Best Practice
For applications using dynamic styles, consider using style-src-attr and style-src-elem directives for more granular control over different types of style applications.
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