ブラウザが（たとえば）CDNを呼び出すスクリプトタグを実際に見る前にjQuery CDNに接続できるように、サイトにいくつかの事前接続リソースヒントを含めたいと思います。「crossorigin」属性を含める必要があるかどうか、またはその値をどのようにする必要があるかわかりません。スペックは、一部では、と言います

事前接続を開始するには、ユーザーエージェントが次の手順を実行する必要があります。

[…]

3. してみましょうcorsAttributeStateは、要素の現在の状態とcrossoriginコンテンツの属性。
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"場合：

• crossorigin属性を持つ画像や動画などのアセットを使用している
• ユーザーエージェントとオリジンとの以前の対話に基づいて、オリジン間でCookie、HTTP認証、およびクライアント側SSL証明書を伝送することを計画しています。

あなたが引用したドキュメントに加えて、私はこれとそれを手に入れました。しかし、実際のドキュメントは誤解を招くと誤った綴りが含まれます：最初のコールをuse-credentials、秒を- user-credentials。

とにかく、私の理解では：

• いいえcrossorigin、すべて対等でcrossorigin="anonymous"
• crossorigin 等しい crossorigin="use-credentials"

多分誰かが私を修正するでしょう。

PS：主題に対するMozillaページの現在のバージョンは、次のことを意味します。

無効なキーワードと空の文字列は匿名キーワードとして扱われます。

意味：いいえcrossorigin、crossoriginまたはcrossorigin="use_credentials"すべてとして処理されcrossorigin="anonymous"ます。

それは2つのことに依存します：

1. ダウンロードするアセットのタイプ（CORSを使用するかどうかを決定します）
2. ターゲットサーバーがCORS接続に資格情報を使用するかどうか

jQueryの場合は使用しませんcrossorigin。スクリプトは、ブラウザがCORSを使用してダウンロードするリソースのタイプには含まれません。

一方、フォントはCORSを使用します。

• ページがCORSを使用するリソースのみをフェッチする場合は、crossorigin属性を含めます。
• ページがCORSを使用しないリソースのみをフェッチする場合は、省略しcrossoriginます。もし
• ページが両方の種類のリソースをフェッチする場合、2つのリソースヒントが必要になる場合があります。（完全な開示、リンクは私の個人サイトへのリンクです。:-)）HTTP / 2には2つのヒントは必要ないかもしれないと誰かが指摘しました。テストする時間がありませんでした。

これは、同じ問題が発生したスタックオーバーフローの投稿です。

CORSの資格情報が必要な場合については、詳しく説明していません。私はそれらが必要とされる例を見ていないので、crossoriginおそらくあなたが安全である可能性があります（つまり、 `crossorigin =" anonymous "）。

これまでのすべての回答は部分的に間違っているか不完全であるように見えます（トピックは複雑で、物事は紛らわしい名前が付けられ、十分に文書化されていません！）、ここに私の理解があります：

によって作成された接続を再利用できるようにするには、<link rel=preconnect>取得するコンテンツの種類、場所、リクエストがブラウザの資格情報を送信するかどうか（ブラウザが明示的または暗黙的に確立できる）によって異なります。

リクエストは同一オリジンです（example.comからサブリソースをリクエストしますexample.com）

そもそも必要はありませんpreconnect。ブラウザは、ページをしばらくロードした後も接続を開いたままにします。

チェック対象：同一生成元リクエストにcrossorigin属性がある場合はどうなりますか：使用されているか無視されていますか？

リクエストはクロスオリジンです（example.comからサブリソースをリクエストしますanother.com）

• 実際のリクエスト（HTMLまたはJS経由）にcrossorigin属性が明示的に設定されているcrossOrigin場合（JSでは大文字と小文字が重要です）、事前接続にも同じ値を指定する必要があります（おそらく、意味がなくcrossorigin無視された場合を除いて）-まだ完全にはわかりません）
• それ以外の場合、要求された場合<script type=module>：チェックされる
• 要求があるとのために、「古い学校」の要求ならば、他の、<img>、<style type=stylesheet>、<iframe>、古典的な<script>（HTMLやJSを経由して開始された）など せずにcrossorigin明示的に指定され、その後、事前接続MUSTは持っていませcrossorigin属性セットを。
• それ以外の場合、リクエストがクロスオリジンフォントリクエストの場合、事前接続にはcrossorigin=anonymous
• それ以外の場合、リクエストがクロスオリジン fetchまたはXHR：
  • 認証モードで実行される場合（つまり、Cookieが添付されるか、HTTP基本認証が使用されます。フェッチの場合、これはを意味しcredentials !== omitますwithCredentials === true。XHRの場合:)：事前接続にはcrossorigin=use-credentials
  • 資格証明モードでない場合：事前接続には crossorigin=anonymous

最後のケース（フェッチ/ 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では、たとえ事前接続が想定されていても機能しません
• 事前接続が機能しているかどうかを確認する3つの方法
• ブラウザでは、発生する可能性のある並列DNS要求の数に制限があります
• WebPageTestでカスタムスクリプトインジェクションを使用して事前接続を試す