files/vi/web/http/headers/content-security-policy/style-src/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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>