Content-Security-Policy: style-src directive - HTTP | MDN (original) (raw)

Baseline

Widely available

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

Syntax

Content-Security-Policy: style-src 'none';
Content-Security-Policy: style-src <source-expression-list>;

This directive may have one of the following values:

'none'

No resources of this type may be loaded. The single quotes are mandatory.

A space-separated list of source expression values. Resources of this type may be loaded if they match any of the given source expressions. For this directive, the following source expression values are applicable:

• 'self'
• 'unsafe-inline'
• 'unsafe-hashes'
• 'nonce-<nonce_value>'
• '<hash_algorithm>-<hash_value>'
• 'report-sample'

Note that the specification also includes 'unsafe-eval' as a valid source expression value, in order to permit the CSSOM methods that parse and insert CSS strings, including the insertRule() methods and cssText setters on various interfaces, such as CSSStyleSheet.insertRule() and CSSStyleDeclaration.cssText. However no browser currently blocks these methods, so there is no need to apply unsafe-eval.

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" />

<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. The following Content Security Policy will allow inline styles like the