The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) style-src directive specifies valid sources for stylesheets.
| CSP version | 1 |
|---|---|
| Directive type | {{Glossary("Fetch directive")}} |
| {{CSP("default-src")}} fallback | Yes. If this directive is absent, the user agent will look for the default-src directive. |
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>;
{{page("Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}
Với tiêu đề CSP này:
Content-Security-Policy: style-src https://example.com/
các bảng định kiểu sau bị chặn và không tải:
<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 {{HTTPHeader("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 {{domxref("CSSStyleDeclaration.cssText", "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 {{domxref("HTMLElement.style", "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 {{CSP("script-src")}} CSP directive.
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 {{HTMLElement("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 {{HTMLElement("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 {{HTMLElement("style")}} tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
<style>#inline-style { background: red; }</style>
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:
| Specification | Status | Comment |
|---|---|---|
| {{specName("CSP 3.0", "#directive-style-src", "style-src")}} | {{Spec2('CSP 3.0')}} | No changes. |
| {{specName("CSP 1.1", "#directive-style-src", "style-src")}} | {{Spec2('CSP 1.1')}} | Initial definition. |
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.
{{Compat("http.headers.csp.Content-Security-Policy.style-src")}}