CSP: style-src-attr

The HTTP Content-Security-Policy (CSP) style-src-attr directive specifies valid sources for inline styles applied to individual DOM elements.

The directive does not set valid sources for <style> elements and <link> elements with rel="stylesheet". These are set using style-src-elem (and valid sources for all styles may be set with style-src).

CSP version 3
Directive type Fetch directive
default-src fallback

Yes. If this directive is absent, the user agent will look for the style-src directive, and if both of them are absent, fallback to default-src directive.

Syntax

http
Content-Security-Policy: style-src-attr 'none';
Content-Security-Policy: style-src-attr <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.

<source-expression-list>

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:

style-src-attr can be used in conjunction with style-src:

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

Examples

Violation cases

Given this CSP header:

http
Content-Security-Policy: style-src-attr 'none'

…the inline style applied to the element below will not be applied:

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

The policy would also block any styles applied in JavaScript by setting the style attribute directly, or by setting cssText:

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

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

js
document.querySelector("div").style.display = "none";

Note that using JavaScript might independently be blocked using the script-src CSP directive.

Specifications

Specification
Content Security Policy Level 3
# directive-style-src-attr

Browser compatibility

BCD tables only load in the browser

See also