style-src

The style-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
Explore detailed value definitions

Recommended style-src configuration

Content-Security-Policy: style-src 'self' https://trusted-cdn.com;

Relationship with style-src-elem and style-src-attr

The style-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"> elements
style-src-attr specifically controls inline style attributes (like style="...")
If either of these more specific directives is not specified, the browser falls back to the rules specified in style-src

Using these directives together allows for more granular control over CSS execution. For example, you might want to:

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:, http:, wss:, ws:)
Wildcards: * for subdomains (e.g., *.example.com)
⚠️ *: Allows all origins
⚠️'unsafe-inline': Allows inline styles
⚠️'unsafe-hashes': Allows inline styles authorization with hashes
⚠️ blob: : Allow blob: URIs
⚠️ data: Allow data: URIs

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