The HTTP Content-Security-Policy
(CSP) style
-src
directive specifies valid sources for 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 thehttp:
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 usinghttps:
.
- <scheme-source>
- A schema such as 'http:' or 'https:'. The colon is required, single quotes shouldn't be used. You can also specify data schemas (not recommended).
data:
Allowsdata:
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:
Allowsmediastream:
URIs to be used as a content source.blob:
Allowsblob:
URIs to be used as a content source.filesystem:
Allowsfilesystem:
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
andfilesystem
from source directives. Sites needing to allow these content types can specify them using the Data attribute. 'unsafe-inline'
- Allows the use of inline resources, such as inline
<script>
elements,javascript:
URLs, inline event handlers, and inline<style>
elements. You must include the single quotes. 'unsafe-eval'
- Allows the use of
eval()
and similar methods for creating code from strings. You must include the single quotes. 'none'
- Refers to the empty set; that is, no URLs match. The single quotes are required.
- 'nonce-<base64-value>'
- A whitelist 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.
- <hash-source>
- A sha256, sha384 or sha512 of inline scripts or styles. 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.
- 'strict-dynamic'
- The
strict-dynamic
source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. At the same time, any whitelist or source expressions such as'self'
or'unsafe-inline'
will be ignored. See script-src for an example.
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
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. |
Editor's Draft | No changes. |
Content Security Policy Level 2 The definition of 'style-src' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Firefox | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | 25 | 23.0 | 14 | (No) | 15 | 7 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | 4.4 | (Yes) | ? | 23.0 | (No) | ? | 7.1 |