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
|
---
title: 'CSP: script-src'
slug: Web/HTTP/Headers/Content-Security-Policy/script-src
translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src
---
<div>{{HTTPSidebar}}</div>
<p>HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>script-src</strong></code> 는 자바스크립트트에 대한 검증된 출처를 지정합니다. 여기에는 {{HTMLElement("script")}} 요소에서 직접 호출한 URL뿐만 아니라, 인라인 스크립트 이벤트 핸들러(<code>onclick</code>) 및 스크립트를 실행할 수 있는 <a href="/en-US/docs/Web/XSLT">XSLT stylesheets</a> 가 포함됩니다.</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>하나 이상의 출처가 <code>script-src</code> 정책에 의해서 허용될 수 있습니다:</p>
<pre class="syntaxbox">Content-Security-Policy: script-src <source>;
Content-Security-Policy: script-src <source> <source>;
</pre>
<h3 id="Sources">Sources</h3>
<p>{{page("Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
<dl>
<dt>'report-sample'</dt>
<dd> Report에 위반 코드 샘플을 포함시키려면 이 항목을 추가 해야 합니다.</dd>
</dl>
<h2 id="예제">예제</h2>
<h3 id="Violation_case">Violation case</h3>
<p>주어진 CSP 헤더:</p>
<pre class="brush: bash">Content-Security-Policy: script-src https://example.com/</pre>
<p>아래 스크립트가 차단되어서 로드 또는 실행되지 않습니다:</p>
<pre class="brush: html"><script src="https://not-example.com/js/library.js"></script></pre>
<p>인라인 스크립트도 실행되지 않습니다:</p>
<pre class="brush: html"><button id="btn" onclick="doSomething()"></pre>
<p>{{domxref("EventTarget.addEventListener", "addEventListener")}}를 호출하는 것으로 대체해야 합니다.:</p>
<pre class="brush: js">document.getElementById("btn").addEventListener('click', doSomething);</pre>
<h3 id="안전하지_않은_인라인_스크립트">안전하지 않은 인라인 스크립트</h3>
<div class="note">
<p><strong>Note:</strong> 인라인 스타일 및 인라인 스크립트를 허용하지 않는 것이 CSP가 제공하는 가장 큰 보안 이점 중 하나 입니다. 그러나, 인라인 스크립트 및 스타일을 사용해야만 한다면 몇가지 방법을 제공합니다.</p>
</div>
<p>인라인 스크립트 및 인라인 이벤트 핸들러를 허용하려면, <code>'unsafe-inline'</code>, 인라인 태그에 정의한 값과 동일한 nonce-source 또는 hash-source를 지정할 수 있습니다.</p>
<pre class="brush: bash">Content-Security-Policy: script-src 'unsafe-inline';
</pre>
<p>위의 CSP는 {{HTMLElement("script")}} 태그를 허용합니다</p>
<pre class="brush: html"><script>
var inline = 1;
</script></pre>
<p>nonce-source를 사용하면 특정 인라인 스크립트 태그만 허용 할 수 있습니다:</p>
<pre class="brush: bash">Content-Security-Policy: script-src 'nonce-2726c7f26c'</pre>
<p>{{HTMLElement("script")}} 태그에 동일한 nonce를 설정해야 합니다 :</p>
<pre class="brush: html"><script nonce="2726c7f26c">
var inline = 1;
</script></pre>
<p>또는, 인라인 스크립트에서 해시를 설정할 수 도 있습니다. CSP는 sha256, sha384 and sha512를 지원합니다.</p>
<pre class="brush: bash">Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='</pre>
<p>해시를 생성할 때에는 {{HTMLElement("script")}} 태그를 포함하지 말고, 대소문자, 태그의 앞뒤 공백이 포함되어야 하는 것을 유의해주십시요.</p>
<pre class="brush: html"><script>var inline = 1;</script></pre>
<h3 id="안전하지_않은_eval_표현식">안전하지 않은 eval 표현식</h3>
<p><code>'unsafe-eval'</code> 출처 표현식은 문자열에서 코드를 생성하는 여러 스크립트 실행 메소드를 제어합니다. 만약<code>'unsafe-eval'</code> 이 <code>script-src</code> 에 정의되어 있지 않으면, 아래믜 명령어는 차단되며 아무런 효과가 일어나지 않습니다.</p>
<ul>
<li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code></li>
<li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li>
<li>아래와 같이 문자열 리터럴을 전달할 때 :<br>
<code>window.setTimeout("alert(\"Hello World!\");", 500);</code>
<ul>
<li>{{domxref("window.setTimeout")}}</li>
<li>{{domxref("window.setInterval")}}</li>
<li>{{domxref("window.setImmediate")}}</li>
</ul>
</li>
<li>{{domxref("window.execScript")}} {{non-standard_inline}} (IE < 11 only)</li>
</ul>
<h3 id="strict-dynamic"><code>strict-dynamic</code></h3>
<p>The <code>'strict-dynamic</code>' source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. At the same time, any whitelist or source expressions such as <code>'self'</code> or <code>'unsafe-inline'</code> will be ignored. For example, a policy such as <code>script-src 'strict-dynamic' 'nonce-R4nd0m' https://whitelisted.com/</code> would allow loading of a root script with <code><script nonce="R4nd0m" src="https://example.com/loader.js"></code> and propogate that trust to any script loaded by <code>loader.js</code>, but disallow loading scripts from <code>https://whitelisted.com/</code> unless accompanied by a nonce or loaded from a trusted script.</p>
<pre class="brush: bash">script-src 'strict-dynamic' 'nonce-<em>someNonce</em>'</pre>
<p><em>Or</em></p>
<pre class="brush: bash">script-src 'strict-dynamic' 'sha256-<em>base64EncodedHash</em>'</pre>
<p>It is possible to deploy <code>strict-dynamic</code> in a backwards compatible way, without requiring user-agent sniffing.<br>
The policy:</p>
<pre class="brush: bash">script-src 'unsafe-inline' https: 'nonce-abcdefg' 'strict-dynamic'</pre>
<p>will act like<code>'unsafe-inline' https:</code> in browsers that support CSP1, <code>https: 'nonce-abcdefg'</code> in browsers that support CSP2, and <code>'nonce-abcdefg' 'strict-dynamic'</code> in browsers that support CSP3.</p>
<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-script-src", "script-src")}}</td>
<td>{{Spec2('CSP 3.0')}}</td>
<td>No changes.</td>
</tr>
<tr>
<td>{{specName("CSP 1.1", "#directive-script-src", "script-src")}}</td>
<td>{{Spec2('CSP 1.1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("http.headers.csp.script-src")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{HTTPHeader("Content-Security-Policy")}}</li>
<li>{{HTMLElement("script")}}</li>
</ul>
|
