Content-Security-Policy: style-src-attr directive
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2022.
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
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:
Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src-attr <source>;
Examples
Violation cases
Given this CSP header:
Content-Security-Policy: style-src-attr 'none'
…the inline style applied to the element below will not be applied:
<div style="display: inline">Foo</div>
The policy would also block any styles applied in JavaScript by setting the style attribute directly, or by setting cssText:
document.querySelector("div").setAttribute("style", "display: inline");
document.querySelector("div").style.cssText = "display: inline";
Style 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 = "inline";
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
style-src-attr
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support