브라우저가 CDN을 호출하는 스크립트 태그를 실제로보기 전에 jQuery CDN에 연결할 수 있도록 사이트에 사전 연결 리소스 힌트를 포함하고 싶습니다. “crossorigin”속성을 포함해야하는지 또는 그 값이 무엇인지 확실하지 않습니다. 사양은 부분적으로 말한다

사전 연결을 시작하려면 사용자 에이전트가 다음 단계를 실행해야합니다.

[…]

3. 하자 corsAttributeState는 요소의 현재 상태가 될 crossorigincontent 속성.
4. 하자 자격 증명 에 부울 값 세트 수 true.
5. 경우 corsAttributeState가 있다 Anonymous및 원점 이며, 현재 문서의 원점으로 설정 자격 증명을 동일하지 false.
6. 원본 및 자격 증명 을 사용하여 연결을 시도하십시오 .

이 알고리즘을 해석하는 방법을 모르겠습니다. CDN에 사전 연결하는 경우 모든 종류의 자격 증명없이 콘텐츠를 다운로드 할 수있는 경우“crossorigin”속성에 어떤 값을 사용해야합니까?

나는 똑같은 것을 찾고 있었고 이것을 발견 했다.

교차 출처 속성을 사용하지 않으면 사용자 에이전트는 dns 조회 만 수행하지만 특정 도메인과의 연결을 설정하지는 않습니다. 따라서 다음과 같이 교차 도메인에 사전 연결해야하는 경우 crossorigin 속성이 필요합니다.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

또한 특정 크로스 도메인에 자격 증명을 보내려면 값을 crossorigin으로 설정할 수 있습니다. crossorigin = use-credentials그렇지 않으면 기본값이 익명이라고 생각합니다.

지금까지 나는 crossorigin값의 관점에서 의 사용법을 이해하고 다음 anonymous과 같은 경우에 use-credentials사용해야합니다 crossorigin="use-credentials".

• 교차 출처 속성이있는 이미지 또는 동영상과 같은 저작물을 사용합니다.
• 사용자 에이전트의 이전 오리진과의 상호 작용을 기반으로 오리진간에 쿠키, HTTP 인증 및 클라이언트 측 SSL 인증서를 전달할 계획입니다.

또한 당신 이 인용 한 문서에 이것 과 저것을 얻었습니다 . 그러나 실제로 문서는 오해의 소지가 있으며 철자가 잘못되었습니다. 첫 번째 문서는 use-credentials두 번째 문서입니다 user-credentials.

어쨌든 내 이해에서 :

• 전혀 crossorigin같지 않다crossorigin="anonymous"
• crossorigin 같다 crossorigin="use-credentials"

누군가가 나를 고칠 수도 있습니다.

추신 : 주제에 대한 모질라 페이지 의 현재 버전은 다음을 의미합니다.

잘못된 키워드와 빈 문자열은 익명 키워드로 처리됩니다.

수단 : 없음 crossorigin전혀, crossorigin또는 crossorigin="use_credentials"모든으로 처리됩니다 crossorigin="anonymous".

그것은 두 가지에 달려 있습니다 :

1. 다운로드 할 자산 유형 (CORS 사용 여부를 결정)
2. 대상 서버가 CORS 연결에 신임 정보를 사용하는지 여부

jQuery의 경우을 사용하지 않습니다crossorigin . 스크립트는 CORS를 사용하여 다운로드하는 리소스 유형에 속하지 않습니다 .

반면에 글꼴은 CORS를 사용합니다.

• 페이지가 CORS를 사용하는 자원 만 페치하는 경우 crossorigin속성을 포함하십시오 .
• 페이지에서 CORS를 사용 하지 않는 리소스 만 가져 오면 생략하십시오 crossorigin. 만약
• 페이지가 두 종류의 리소스를 모두 가져 오는 경우 두 가지 리소스 힌트 가 필요할 수 있습니다 . (전체 공개, 링크는 내 개인 사이트입니다. :-)) 누군가 HTTP / 2에 대한 두 가지 힌트가 필요하지 않을 것이라고 지적했습니다 . 테스트 할 시간이 없었습니다.

다음 은 동일한 문제가 발생한 스택 오버플로 게시물 입니다.

CORS 자격 증명이 필요한 시점으로 넘어 가지 않았습니다. 나는 그들이 필요한 곳의 예를 보지 않았으므로, 당신은 안전 할 가능성이있다 crossorigin(즉,`crossorigin = "anonymous").

지금까지의 모든 대답은 단순화되었거나 불완전하거나 부분적으로 잘못 된 것처럼 보입니다 (주제는 복잡하고 상황이 혼란스럽고 이름이 잘 지정되어 있지 않습니다!).

에서 만든 연결을 재사용하려면 <link rel=preconnect>요청이 브라우저 자격 증명을 보낼지 여부 (브라우저에서 명시 적 또는 암시 적으로 설정할 수 있음)에서 가져 오려는 콘텐츠 종류에 따라 다릅니다.

요청이 동일 출처 ( example.com요청 하위 리소스 example.com)

preconnect처음 에는 전혀 필요가 없습니다 . 브라우저는 페이지를 꽤 오랫동안로드 한 후에도 연결을 유지합니다. 열려있는 연결이 여러 개인 경우 브라우저는 열어야 할 연결 수와 열 수를 결정합니다 (서버가 TLS 핸드 셰이크, 브라우저 설정 등에서 HTTP / 2 지원을 발표하는지에 따라)

점검 : 동일 출처 요청에 crossorigin속성이있는 경우 : 사용 또는 무시됩니까?

요청이 교차 출처입니다 ( example.com에서 하위 리소스 요청 another.com)

• 실제 요청 에 HTML에서 명시 적으로 설정된crossorigin 속성이있는 경우 ( JS에서는 중요 함) 사전 연결에도 동일한 값을 가져야합니다 (아마 의미가없고 무시 되는 경우를 제외하고 는 완전히 명확하지 않음) 나 아직)crossOrigincrossorigin
• 그렇지 않으면 요청이있는 경우 <script type=module>: 점검
• 요청하고는 "오래된 학교"요청하면 다른, <img>, <style type=stylesheet>, <iframe>, 고전 <script>등 (HTML 또는 JS를 통해 시작) 없이 crossorigin명시 적으로 지정된 후 사전 연결은 MUST이없는 crossorigin속성 세트를.
• 그렇지 않으면 요청이 교차 출처 글꼴 요청 인 경우 사전 연결에는crossorigin=anonymous
• 또, 요청이있는 경우 출처 간 fetch 또는 XHR:
  • 자격 증명 모드에서 수행되는 경우 (예 : 쿠키가 첨부되거나 HTTP 기본 인증이 사용됩니다. 가져 오기의 credentials !== omit경우 이는 XHR의 경우 withCredentials === true:) : 사전 연결에 있어야합니다crossorigin=use-credentials
  • 자격 증명 모드가 아닌 경우 : preconnect는 crossorigin=anonymous

마지막 경우 (fetch / XHR)의 경우 Chrome / Firefox devtools의 네트워크 패널로 이동하여 요청을 마우스 오른쪽 버튼으로 클릭 한 copy as fetch다음 드롭 다운에서 선택하십시오. 그러면 JS 스 니펫이 생성되어 해당 요청이 CORS 가능 ( "mode"=="cors") 및 자격 증명 ( "credentials"=="include"|"same-origin") 인지 알려줍니다 .

참고 그러나 트릭은 위의 예를 들어 있기 때문에, 요청을 가져 오기 / 비 XHR 제대로 작동하지 않는 fetch및 <img>이전과 설명, 연결을 설정하기 위해 다른 알고리즘을 사용합니다.

마지막으로 HTML에서 <link ...crossorigin>=== <link ...crossorigin=anonymous>입니다.

추가 메모 및 링크 :

• Firefox에서는 사전 연결이 제대로되어 있어도 작동하지 않습니다.
• 사전 연결이 작동하는지 확인하는 세 가지 방법
• 병렬 DNS 요청이 발생할 수있는 브라우저에는 약간의 제한이 있습니다.
• WebPageTest에서 사용자 정의 스크립트 삽입으로 사전 연결 실험