Attributes

HTML attribute: crossorigin

<audio>, <img>, <link>, <script>, <video>에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 CORS 가...

· 1min read · 1 views

<audio>, <img>, <link>, <script>, <video>에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 CORS 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.

Media element의 crossorigin 속성은 CORS 세팅입니다.

세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:

Keyword Description
anonymous element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다.
use-credentials element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다.
"" crossorigin 또는 crossorigin=""처럼 빈 값을 할당하는건 anonymous와 동일합니다.

기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 user credentials 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 Terminology section of the CORS specification에서 기술하고 있습니다.

빈 문자열이나 잘못된 값일 경우 anonymous 와 동일하게 동작합니다.

예시: script element의 crossorigin

아래의 <script> element를 통해 브라우저로 하여금 https://example.com/example-framework.js 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.

<script
  src="https://example.com/example-framework.js"
  crossorigin="anonymous"></script>

예시: credential 포함한 Webmanifest

Manifest 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 use-credentials 값을 사용해야 합니다.

<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

더 보기

Related Docs

Attributes

HTML autocomplete 특성

autocomplete 특성을 사용하면 사용자 에이전트의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원...

2min read 1 views
Attributes

HTML disabled 속성

참과 거짓 중 하나의 값을 갖는 disabled 속성이 있을 경우 해당 요소는 수정하거나 포커스를 맞출 수 없고, 폼을 통해 제출될 수도 없습니다. 사용자는 컨트롤...

3min read 3 views
Attributes

HTML attribute: elementtiming

elementtiming 특성은 "element" 타입을 사용하는 PerformanceObserver 객체가 추적할 요소를 표시하는 데 사용됩니다. 자세한 내용은 PerformanceElementTiming...

1min read 1 views
Attributes

HTML attribute: for

for 특성은 <label>과 <output>에 적용 가능한 특성입니다. <label> 요소에 적용하는 경우 라벨이 설명하고 있는 양식 요소를 나타냅니다. <output> 요소에 적용...

2min read 2 views

Comments (0)

No comments yet. Be the first to comment!

Leave a Comment

로그인 후 댓글을 남길 수 있습니다.