diff options
Diffstat (limited to 'files/vi/web/http/headers/content-security-policy/style-src/index.html')
| -rw-r--r-- | files/vi/web/http/headers/content-security-policy/style-src/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/vi/web/http/headers/content-security-policy/style-src/index.html b/files/vi/web/http/headers/content-security-policy/style-src/index.html new file mode 100644 index 0000000000..d4d81d3cce --- /dev/null +++ b/files/vi/web/http/headers/content-security-policy/style-src/index.html @@ -0,0 +1,167 @@ +--- +title: 'CSP: style-src' +slug: Web/HTTP/Headers/Content-Security-Policy/style-src +translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src +--- +<div>{{HTTPSidebar}}</div> + +<p>The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>style</strong></code><strong><code>-src</code></strong> directive specifies valid sources for stylesheets.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">CSP version</th> + <td>1</td> + </tr> + <tr> + <th scope="row">Directive type</th> + <td>{{Glossary("Fetch directive")}}</td> + </tr> + <tr> + <th scope="row">{{CSP("default-src")}} fallback</th> + <td>Yes. If this directive is absent, the user agent will look for the <code>default-src</code> directive.</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax">Syntax</h2> + +<p>One or more sources can be allowed for the <code>style-src</code> policy:</p> + +<pre class="syntaxbox notranslate">Content-Security-Policy: style-src <source>; +Content-Security-Policy: style-src <source> <source>; +</pre> + +<h3 id="Sources">Sources</h3> + +<p>{{page("Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Violation_cases">Violation cases</h3> + +<p>Với tiêu đề CSP này:</p> + +<pre class="brush: bash notranslate">Content-Security-Policy: style-src https://example.com/</pre> + +<p>các bảng định kiểu sau bị chặn và không tải:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>as well as styles loaded using the {{HTTPHeader("Link")}} header:</p> + +<pre class="brush: bash notranslate">Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet +</pre> + +<p>Inline style attributes are also blocked:</p> + +<pre class="brush: html notranslate"><div style="display:none">Foo</div></pre> + +<p class="brush: js">As well as styles that are applied in Javascript by setting the <code>style</code> attribute directly, or by setting {{domxref("CSSStyleDeclaration.cssText", "cssText")}}:</p> + +<pre class="brush: js notranslate">document.querySelector('div').setAttribute('style', 'display:none;'); +document.querySelector('div').style.cssText = 'display:none;';</pre> + +<p>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:</p> + +<pre class="brush: js notranslate">document.querySelector('div').style.display = 'none';</pre> + +<p>These types of manipulations can be prevented by disallowing Javascript via the {{CSP("script-src")}} CSP directive.</p> + +<h3 id="Unsafe_inline_styles">Unsafe inline styles</h3> + +<div class="note"> +<p><strong>Note:</strong> 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.</p> +</div> + +<p>To allow inline styles, <code>'unsafe-inline'</code>, a nonce-source or a hash-source that matches the inline block can be specified.</p> + +<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'unsafe-inline'; +</pre> + +<p>The above Content Security Policy will allow inline styles like the {{HTMLElement("style")}} element, and the <code>style</code> attribute on any element:</p> + +<pre class="brush: html notranslate"><style> +#inline-style { background: red; } +</style> + +<div style="display:none">Foo</div> +</pre> + +<p>You can use a nonce-source to only allow specific inline style blocks:</p> + +<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'nonce-2726c7f26c'</pre> + +<p>You will have to set the same nonce on the {{HTMLElement("style")}} element:</p> + +<pre class="brush: html notranslate"><style nonce="2726c7f26c"> +#inline-style { background: red; } +</style></pre> + +<p>Alternatively, you can create hashes from your inline styles. CSP supports sha256, sha384 and sha512.</p> + +<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'</pre> + +<p>When generating the hash, don't include the {{HTMLElement("style")}} tags and note that capitalization and whitespace matter, including leading or trailing whitespace.</p> + +<pre class="brush: html notranslate"><style>#inline-style { background: red; }</style></pre> + +<h3 id="Unsafe_style_expressions">Unsafe style expressions</h3> + +<p>The <code>'unsafe-eval'</code> source expression controls several style methods that create style declarations from strings. If <code>'unsafe-eval'</code> isn't specified with the <code>style-src</code> directive, the following methods are blocked and won't have any effect:</p> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule()")}}</li> + <li>{{domxref("CSSGroupingRule.insertRule()")}}</li> + <li>{{domxref("CSSStyleDeclaration.cssText")}}</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{specName("CSP 3.0", "#directive-style-src", "style-src")}}</td> + <td>{{Spec2('CSP 3.0')}}</td> + <td>No changes.</td> + </tr> + <tr> + <td>{{specName("CSP 1.1", "#directive-style-src", "style-src")}}</td> + <td>{{Spec2('CSP 1.1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.csp.Content-Security-Policy.style-src")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPHeader("Content-Security-Policy")}}</li> + <li>{{CSP("style-src-elem")}}</li> + <li>{{CSP("style-src-attr")}}</li> + <li>{{HTTPHeader("Link")}} header</li> + <li>{{HTMLElement("style")}}, {{HTMLElement("link")}}</li> + <li>{{cssxref("@import")}}</li> + <li>{{domxref("CSSStyleSheet.insertRule()")}}</li> + <li>{{domxref("CSSGroupingRule.insertRule()")}}</li> + <li>{{domxref("CSSStyleDeclaration.cssText")}}</li> +</ul> |