diff options
Diffstat (limited to 'files/ko/web/html/attributes/crossorigin/index.html')
| -rw-r--r-- | files/ko/web/html/attributes/crossorigin/index.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/files/ko/web/html/attributes/crossorigin/index.html b/files/ko/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..70131a4486 --- /dev/null +++ b/files/ko/web/html/attributes/crossorigin/index.html @@ -0,0 +1,96 @@ +--- +title: 'HTML attribute: crossorigin' +slug: Web/HTML/Attributes/crossorigin +translation_of: Web/HTML/Attributes/crossorigin +--- +<div>{{draft}}</div> + +<p class="seoSummary">{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.</p> + +<p>Media element의 <code>crossorigin</code> 속성은 CORS 세팅입니다.</p> + +<p>세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Keyword</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다.</td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>crossorigin</code> 또는 <code>crossorigin=""</code>처럼 빈 값을 할당하는건 <code>anonymous</code>와 동일합니다.</td> + </tr> + </tbody> +</table> + +<p>기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 <strong>user credentials</strong> 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Terminology section of the CORS specification</a>에서 기술하고 있습니다.</p> + +<p>빈 문자열이나 잘못된 값일 경우 <code>anonymous</code> 와 동일하게 동작합니다.</p> + +<h3 id="예시_script_element의_crossorigin">예시: script element의 crossorigin</h3> + +<p>아래의 {{HTMLElement("script")}} element를 통해 브라우저로 하여금 <code>https://example.com/example-framework.js</code> 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" crossorigin="anonymous"></script></pre> + +<h3 id="예시_credential_포함한_Webmanifest">예시: credential 포함한 Webmanifest</h3> + +<p><a href="/en-US/docs/Web/Manifest">Manifest</a> 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 <code>use-credentials</code> 값을 사용해야 합니다.</p> + +<pre class="brush: html"><link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"></pre> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="<script_crossorigin>"><script crossorigin></h3> + +<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("html.elements.script.crossorigin")}}</p> + +<h3 id="<video_crossorigin>"><video crossorigin></h3> + +<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("html.elements.video.crossorigin")}}</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: <code>rel</code></a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div> |