initial commit

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 &lt;source&gt;;
+Content-Security-Policy: style-src &lt;source&gt; &lt;source&gt;;
+</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">&lt;link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /&gt;
+
+&lt;style&gt;
+#inline-style { background: red; }
+&lt;/style&gt;
+
+&lt;style&gt;
+  @import url("https://not-example.com/styles/print.css") print;
+&lt;/style&gt;</pre>
+
+<p>as well as styles loaded using the {{HTTPHeader("Link")}} header:</p>
+
+<pre class="brush: bash notranslate">Link: &lt;https://not-example.com/styles/stylesheet.css&gt;;rel=stylesheet
+</pre>
+
+<p>Inline style attributes are also blocked:</p>
+
+<pre class="brush: html notranslate">&lt;div style="display:none"&gt;Foo&lt;/div&gt;</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">&lt;style&gt;
+#inline-style { background: red; }
+&lt;/style&gt;
+
+&lt;div style="display:none"&gt;Foo&lt;/div&gt;
+</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">&lt;style nonce="2726c7f26c"&gt;
+#inline-style { background: red; }
+&lt;/style&gt;</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">&lt;style&gt;#inline-style { background: red; }&lt;/style&gt;</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>