CSP: style-src

The HTTP Content-Security-Policy (CSP) style-src directive specifies valid sources for stylesheets.

CSP version 1
Directive type Fetch directive
default-src fallback Yes. If this directive is absent, the user agent will look for the default-src directive.

Syntax

One or more sources can be allowed for the style-src policy:

Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src <source> <source>;

Sources

<source> can be one of the following:

<host-source>
Internet hosts by name or IP address, as well as an optional URL scheme and/or port number. The site's address may include an optional leading wildcard (the asterisk character, '*'), and you may use a wildcard (again, '*') as the port number, indicating that all legal ports are valid for the source.
Examples:
  • http://*.example.com: Matches all attempts to load from any subdomain of example.com using the http: URL scheme.
  • mail.example.com:443: Matches all attempts to access port 443 on mail.example.com.
  • https://store.example.com: Matches all attempts to access store.example.com using https:.
  • *.example.com: Matches all attempts to load from any subdomain of example.com using the current protocol.
<scheme-source>
A scheme such as http: or https:. The colon is required. Unlike other values below, single quotes shouldn't be used. You can also specify data schemes (not recommended).
  • data: Allows data: URIs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.
  • mediastream: Allows mediastream: URIs to be used as a content source.
  • blob: Allows blob: URIs to be used as a content source.
  • filesystem: Allows filesystem: URIs to be used as a content source.
'self'
Refers to the origin from which the protected document is being served, including the same URL scheme and port number. You must include the single quotes. Some browsers specifically exclude blob and filesystem from source directives. Sites needing to allow these content types can specify them using the Data attribute.
'unsafe-eval'
Allows the use of eval() and similar methods for creating code from strings. You must include the single quotes.
'unsafe-hashes'
Allows enabling specific inline event handlers. If you only need to allow inline event handlers and not inline <script> elements or javascript: URLs, this is a safer method than using the unsafe-inline expression.
'unsafe-inline'
Allows the use of inline resources, such as inline <script> elements, javascript: URLs, inline event handlers, and inline <style> elements. The single quotes are required.
'none'
Refers to the empty set; that is, no URLs match. The single quotes are required.
'nonce-<base64-value>'
An allow-list for specific inline scripts using a cryptographic nonce (number used once). The server must generate a unique nonce value each time it transmits a policy. It is critical to provide an unguessable nonce, as bypassing a resource’s policy is otherwise trivial. See unsafe inline script for an example. Specifying nonce makes a modern browser ignore 'unsafe-inline' which could still be set for older browsers without nonce support.
'<hash-algorithm>-<base64-value>'
A sha256, sha384 or sha512 hash of scripts or styles. The use of this source consists of two portions separated by a dash: the encryption algorithm used to create the hash and the base64-encoded hash of the script or style. When generating the hash, don't include the <script> or <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace. See unsafe inline script for an example. In CSP 2.0, this applied only to inline scripts. CSP 3.0 allows it in the case of script-src for external scripts.

Examples

Violation cases

Given this CSP header:

Content-Security-Policy: style-src https://example.com/

the following stylesheets are blocked and won't load:

<link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" />

<style>
#inline-style { background: red; }
</style>

<style>
  @import url("https://not-example.com/styles/print.css") print;
</style>

as well as styles loaded using the Link header:

Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet

Inline style attributes are also blocked:

<div style="display:none">Foo</div>

As well as styles that are applied in JavaScript by setting the style attribute directly, or by setting cssText:

document.querySelector('div').setAttribute('style', 'display:none;');
document.querySelector('div').style.cssText = 'display:none;';

However, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript:

document.querySelector('div').style.display = 'none';

These types of manipulations can be prevented by disallowing Javascript via the script-src CSP directive.

Unsafe inline styles

Note: Disallowing inline styles and inline scripts is one of the biggest security wins CSP provides. However, if you absolutely have to use it, there are a few mechanisms that will allow them.

To allow inline styles, 'unsafe-inline', a nonce-source or a hash-source that matches the inline block can be specified.

Content-Security-Policy: style-src 'unsafe-inline';

The above Content Security Policy will allow inline styles like the <style> element, and the style attribute on any element:

<style>
#inline-style { background: red; }
</style>

<div style="display:none">Foo</div>

You can use a nonce-source to only allow specific inline style blocks:

Content-Security-Policy: style-src 'nonce-2726c7f26c'

You will have to set the same nonce on the <style> element:

<style nonce="2726c7f26c">
#inline-style { background: red; }
</style>

Alternatively, you can create hashes from your inline styles. CSP supports sha256, sha384 and sha512.

Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'

When generating the hash, don't include the <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.

<style>#inline-style { background: red; }</style>

Unsafe style expressions

The 'unsafe-eval' source expression controls several style methods that create style declarations from strings. If 'unsafe-eval' isn't specified with the style-src directive, the following methods are blocked and won't have any effect:

Specifications

Specification Status Comment
Content Security Policy Level 3
The definition of 'style-src' in that specification.
Working Draft No changes.
Content Security Policy Level 2
The definition of 'style-src' in that specification.
Recommendation Initial definition.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
style-srcChrome Full support 25Edge Full support 14Firefox Full support 23IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 23Opera Android ? Safari iOS Full support 7Samsung Internet Android Full support Yes

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown

See also