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 |
Syntax
One or more sources can be allowed for the style-src-attr
policy:
http
Content-Security-Policy: style-src-attr <source>;
Content-Security-Policy: style-src-attr <source> <source>;
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>;
Sources
<source>
can be any one of the values listed in CSP Source Values.
Note that this same set of values can be used in all fetch directives (and a number of other directives).
Examples
Violation cases
Given this CSP header:
http
Content-Security-Policy: style-src-attr 'none'
…the inline style applied to the element below 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