web-dev-qa-db-ja.com

「preconnect」<link>で「crossorigin」属性を使用する場合

サイトに事前接続リソースのヒントを含めて、CDNを呼び出すスクリプトタグが実際に表示される前にブラウザーが（たとえば）jQuery CDNに接続できるようにします。 「crossorigin」属性を含めるべきかどうか、またはその値がどうあるべきかがわかりません。 spec は、一部、

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

[…]

  1. corsAttributeStateを要素のcrossoriginコンテンツ属性の現在の状態とします。
  2. credentialsをtrueに設定されたブール値とする。
  3. corsAttributeStateがAnonymousで、Originが等しくない場合現在のドキュメントのオリジン、資格情報をfalseに設定します。
  4. Originおよびcredentialsとの接続を取得しようとします。

このアルゴリズムの解釈方法がわかりません。 CDNに事前接続している場合、資格情報なしでコンテンツをだれでもダウンロードできますが、「crossorigin」属性にはどの値を使用すればよいですか？

htmlperformancecross-origin
11
bdesham

私は同じものを探していて、 this を見つけました

ここでは、クロスオリジン属性を使用しない場合、ユーザーエージェントはDNSルックアップを行うだけで、特定のドメインとの接続を確立しないと述べています。したがって、次のようにクロスドメインに事前接続する必要がある場合、crossorigin属性が必要です。

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

また、特定のクロスドメインに資格情報を送信する場合は、crossorigin = use-credentialsとしてcrossoriginに値を設定できます。それ以外の場合、デフォルト値は匿名だと思います。

2
orangespark

これまでのところ、crossoriginの使用法を理解しています。特にその値anonymousおよびuse-credentialsに関しては、crossorigin="use-credentials"の場合を使用する必要があります。

  • クロスオリジン属性を持つ画像や動画などのアセットを使用します
  • ユーザーエージェントと以前のオリジンとのやり取りに基づいて、オリジン間でCookie、HTTP認証、およびクライアント側SSL証明書を運ぶ予定です。

あなたが引用したドキュメントに加えて、私は this と that を得ました。しかし実際、ドキュメントは誤解を招くものであり、つづりの間違いが含まれています。最初はuse-credentials、2番目はuser-credentialsと呼びます。

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

  • crossoriginがcrossorigin="anonymous"と等しい
  • crossoriginはcrossorigin="use-credentials"と等しい

たぶん誰かが私を修正するでしょう。

PS：件名に対する Mozillaページの現在のバージョン

無効なキーワードと空の文字列は、匿名キーワードとして処理されます。

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

2
Evgeniy

次の2つのことに依存します。

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

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

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

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

ここに Stack Overflow post があり、同じ問題が発生しました。

CORSクレデンシャルが必要なとき、私は飛び込みませんでした。それらが必要な例を見たことがないので、crossorigin（つまり、 `crossorigin =" anonymous "）で安全である可能性があります。

1
Michael Crenshaw