diff options
Diffstat (limited to 'files/ko/web/http/headers/content-security-policy/script-src/index.html')
| -rw-r--r-- | files/ko/web/http/headers/content-security-policy/script-src/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/ko/web/http/headers/content-security-policy/script-src/index.html b/files/ko/web/http/headers/content-security-policy/script-src/index.html new file mode 100644 index 0000000000..98999637aa --- /dev/null +++ b/files/ko/web/http/headers/content-security-policy/script-src/index.html @@ -0,0 +1,167 @@ +--- +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 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.script-src")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPHeader("Content-Security-Policy")}}</li> + <li>{{HTMLElement("script")}}</li> +</ul> |