Ich möchte meiner Website einige Hinweise zum Vorverbinden von Ressourcen hinzufügen, damit Browser (zum Beispiel) eine Verbindung zum jQuery-CDN herstellen können, bevor sie tatsächlich das Skript-Tag sehen, das das CDN aufruft. Ich bin mir nicht sicher, ob ich das Attribut "crossorigin" einfügen soll oder welchen Wert es haben soll. Die Spezifikation sagt teilweise,

Um eine Vorverbindung zu initiieren, muss der Benutzeragent die folgenden Schritte ausführen:

[…]

3. Sei corsAttributeState der aktuelle Status des crossoriginInhaltsattributs des Elements .
4. Lassen Sie Anmeldeinformationen in einem Booleschen Wert gesetzt werden true.
5. Wenn corsAttributeState ist Anonymousund der Ursprung nicht dem Ursprung des aktuellen Dokuments entspricht, setzen Sie die Anmeldeinformationen auf false.
6. Versuchen Sie, eine Verbindung mit Herkunft und Anmeldeinformationen herzustellen .

Ich weiß nicht, wie ich diesen Algorithmus interpretieren soll. Welchen Wert sollte ich für das Attribut "crossorigin" verwenden, wenn ich eine Verbindung zu einem CDN herstelle, mit dem jeder seinen Inhalt ohne Anmeldeinformationen herunterladen kann?

Ich war für die gleiche Sache suchen und ich fand diese

Hier heißt es, dass der Benutzeragent, wenn Sie kein Cross-Origin-Attribut verwenden, nur die DNS-Suche durchführt, aber keine Verbindung mit der bestimmten Domäne herstellt. Das Crossorigin-Attribut wird also benötigt, wenn Sie eine Vorverbindung zum Cross-Domain herstellen müssen, wie folgt:

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

Wenn Sie einige Anmeldeinformationen an diese bestimmte domänenübergreifende Datei senden möchten, können Sie den Wert auf crossorigin setzen, da crossorigin = use-credentialsder Standardwert ansonsten anonym ist.

Bisher verstehe ich die Verwendung von crossorigin, insbesondere in Bezug auf seine Werte anonymousund use-credentials, die Sie verwenden sollten, crossorigin="use-credentials"falls:

• Sie verwenden Assets wie Bilder oder Videos, die ein Crossorigin-Attribut haben
• Sie planen, Cookies, HTTP-Authentifizierung und clientseitige SSL-Zertifikate zwischen den Ursprüngen zu übertragen, basierend auf den vorherigen Interaktionen des Benutzeragenten mit dem Ursprung.

Zusätzlich zu der von Ihnen zitierten Dokumentation habe ich dies und das . In der Tat ist die Dokumentation irreführend und enthält Rechtschreibfehler: der erste nennt sie use-credentials, der zweite - user-credentials.

Sowieso nach meinem Verständnis:

• nein crossoriginüberhaupt gleichcrossorigin="anonymous"
• crossorigin gleich crossorigin="use-credentials"

Vielleicht würde mich jemand korrigieren.

PS : Die aktuelle Version der Mozilla-Seite zum Thema bedeutet:

Ein ungültiges Schlüsselwort und eine leere Zeichenfolge werden als anonymes Schlüsselwort behandelt.

Mittel: Nein crossoriginüberhaupt, crossoriginoder crossorigin="use_credentials"sind alle behandelt wie crossorigin="anonymous".

Es hängt von zwei Dingen ab:

1. Die Art der herunterzuladenden Assets (die bestimmt, ob CORS verwendet wird)
2. Gibt an, ob der Zielserver Anmeldeinformationen für CORS-Verbindungen verwendet

Für jQuery würdencrossorigin Sie nicht verwenden . Skripte gehören nicht zu den Arten von Ressourcen, die Browser zum Herunterladen mit CORS verwenden .

Schriftarten verwenden dagegen CORS.

• Wenn die Seite nur Ressourcen abruft, die CORS verwenden, geben Sie das crossoriginAttribut an.
• Wenn die Seite nur Ressourcen abruft, die kein CORS verwenden, lassen Sie es weg crossorigin. Wenn
• Wenn die Seite beide Arten von Ressourcen abruft, benötigen Sie möglicherweise zwei Ressourcenhinweise . (Vollständige Offenlegung, der Link führt zu meiner persönlichen Website. :-)) Jemand hat darauf hingewiesen, dass Sie möglicherweise keine zwei Hinweise für HTTP / 2 benötigen. Ich hatte keine Zeit zum Testen.

Hier ist der Stapelüberlauf-Beitrag, in dem ich auf dasselbe Problem gestoßen bin.

Ich habe nicht untersucht, wann CORS-Anmeldeinformationen erforderlich sind. Ich habe kein Beispiel gesehen, in dem sie benötigt werden, daher sind Sie crossoriginwahrscheinlich in Sicherheit (dh "crossorigin =" anonym ").

Alle bisherigen Antworten scheinen entweder teilweise falsch oder unvollständig zu sein (das Thema ist komplex, die Dinge sind verwirrend benannt und nicht gut dokumentiert!). Hier ist mein Verständnis:

Um die von hergestellte Verbindung wiederverwenden zu können <link rel=preconnect>, hängt es davon ab, welche Art von Inhalten Sie von wo abrufen möchten, ob die Anforderung Browser-Anmeldeinformationen sendet (die vom Browser explizit oder implizit festgelegt werden können):

Die Anfrage hat denselben Ursprung ( example.comfordert Subressource von an example.com)

Es besteht überhaupt keine Notwendigkeit dafür preconnect; Der Browser hält die Verbindung offen, nachdem die Seite eine Weile geladen wurde.

Zu überprüfen : Was ist, wenn eine Anfrage mit demselben Ursprung ein crossoriginAttribut hat: Wird sie verwendet oder ignoriert?

Die Anfrage ist Cross-Origin ( example.comAnfragen Subressource von another.com)

• Wenn für die tatsächliche Anforderung (in HTML oder über JS) das crossoriginAttribut explizit festgelegt wurde ( crossOriginin JS - Fall ist wichtig), muss der Preconnect es ebenfalls mit demselben Wert haben (möglicherweise außer in Fällen, in denen es keinen Sinn crossoriginergibt und ignoriert wird). - noch nicht ganz klar für mich)
• sonst, wenn Anfrage wenn für <script type=module>: geprüft werden
• wenn Anfrage anders ist und die „alte Schule“ Anfrage <img>, <style type=stylesheet>, <iframe>, klassisch <script>usw. (initiiert via HTML oder JS) ohne crossoriginexplizit angegeben , so ist die preconnect darf kein crossoriginAttribut gesetzt.
• wenn Anfrage sonst, a Cross-Origin - Schrift Anfrage müssen preconnect habencrossorigin=anonymous
• sonst, wenn Anfrage ist eine Quer Herkunft fetch oder XHR:
  • Wenn dies im Modus mit Anmeldeinformationen erfolgt (dh Cookies werden angehängt oder HTTP-Basisauthentifizierung verwendet; im Falle eines Abrufs bedeutet dies credentials !== omit; im Fall von XHR withCredentials === true:): Vorverbindung muss vorhanden seincrossorigin=use-credentials
  • Wenn es sich nicht im Anmeldeinformationsmodus befindet: Vorverbindung muss vorhanden sein crossorigin=anonymous

Für den letzten Fall (Abrufen / XHR) gehen Sie in Chrome / Firefox devtools zum Netzwerkfenster, klicken Sie mit der rechten Maustaste auf eine Anfrage und wählen Sie copy as fetchaus einer Dropdown-Liste. Dadurch wird ein JS-Snippet erstellt, das angibt, ob diese Anforderung CORS-fähig ( "mode"=="cors") und mit Anmeldeinformationen ( "credentials"=="include"|"same-origin") ist.

Hinweis aber der Trick oben funktioniert nicht richtig für Nicht-XHR / Abrufanforderungen, weil zum Beispiel fetchund <img>verschiedene Algorithmen verwenden Verbindung herzustellen, wie zuvor erläutert.

Schließlich in HTML <link ...crossorigin>=== <link ...crossorigin=anonymous>.

Zusätzliche Hinweise und Links:

• In Firefox funktioniert Preconnect nicht, selbst wenn dies beabsichtigt ist
• Drei Möglichkeiten, um zu überprüfen, ob die Vorverbindung funktioniert
• Browser haben einige Einschränkungen hinsichtlich der Anzahl paralleler DNS-Anforderungen
• Experimentieren mit Preconnect mit benutzerdefinierter Skriptinjektion in WebPageTest