web-dev-qa-db-fra.com

Quand devrais-je utiliser l'attribut «crossorigin» sur un «preconnect» <link>?

J'aimerais inclure des astuces de ressources de préconnexion sur mon site afin que les navigateurs puissent (par exemple) se connecter au CDN jQuery avant de voir la balise script qui appelle le CDN. Je ne sais pas si je devrais inclure l’attribut "crossorigin" ou quelle devrait être sa valeur. Le spec dit, en partie,

Pour lancer une préconnexion, l'agent d'utilisateur doit exécuter ces étapes:

[…]

  1. Soit corsAttributeState l’état actuel de l’attribut crossorigin content de l’élément.
  2. Soit les informations d'identification une valeur booléenne définie sur true.
  3. Si corsAttributeState est Anonymous et Origine n'est pas égal à Origine du document actuel, définissez les informations d'identification sur false.
  4. Essayez d’obtenir une connexion avec les identifiants d’origine et .

Je ne sais pas comment interpréter cet algorithme. Si je me connecte à un CDN, ce qui permettra à quiconque de télécharger son contenu sans aucune sorte d’identité, quelle valeur dois-je utiliser pour l’attribut "crossorigin"?

htmlperformancecross-origin
11
bdesham

Je cherchais la même chose et j'ai trouvé this

Il est indiqué ici que si vous n'utilisez pas l'attribut cross Origin, l'agent utilisateur ne fait que rechercher le DNS, mais n'établit pas la connexion avec le domaine particulier. Donc, l'attribut crossorigin est nécessaire si vous devez vous connecter à un autre domaine, comme ceci:

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

De plus, si vous souhaitez envoyer des informations d'identification à cet inter-domaine particulier, vous pouvez définir cross-origin comme étant crossorigin = use-credentials sinon je pense que la valeur par défaut est anonyme.

2
orangespark

Jusqu'à présent, je comprends l'utilisation de crossorigin, spécialement en ce qui concerne ses valeurs anonymous et use-credentials, vous devez utiliser crossorigin="use-credentials" au cas où:

  • vous utilisez des ressources, telles que des images ou des vidéos, qui ont un attribut crossorigin
  • vous envisagez de transporter des cookies, une authentification HTTP et des certificats SSL côté client entre les origines, en fonction des interactions précédentes de l'agent d'utilisateur avec l'origine.

En plus de la documentation citée par vous, j’ai obtenu this et that . Mais en réalité, la documentation est trompeuse et contient des fautes d’orthographe: le premier l’appelle use-credentials, la seconde - user-credentials.

Quoi qu'il en soit, dans ma compréhension:

  • non crossorigin du tout égal crossorigin="anonymous"
  • crossorigin est égal à crossorigin="use-credentials"

Peut-être que quelqu'un me corrigerait.

PS: Le version actuelle de la page Mozilla du sujet signifie:

Un mot clé non valide et une chaîne vide seront traités comme mot clé anonyme.

Signifie: pas du tout crossorigin, crossorigin ou crossorigin="use_credentials" sont tous traités comme crossorigin="anonymous".

2
Evgeniy

Cela dépend de deux choses:

  1. Le type d'actifs à télécharger (qui détermine si CORS sera utilisé)
  2. Si le serveur cible utilise les informations d'identification pour les connexions CORS

Pour jQuery, vous n'utiliseriez pas crossorigin. Les scripts ne font pas partie des les types de ressources que les navigateurs utilisent CORS pour télécharger .

Les polices, en revanche, utilisent CORS.

  • Si la page ne récupère que les ressources utilisant CORS, incluez l'attribut crossorigin.
  • Si la page ne récupère que les ressources qui ne utilisent pas le CORS, omettez crossorigin. Si
  • Si la page récupère les deux types de ressources, vous pouvez avez besoin de deux indicateurs de ressource . (La divulgation complète, le lien est à mon site personnel. :-)) Quelqu'un a souligné que vous pourriez ne pas avoir besoin de deux conseils pour HTTP/2. Je n'ai pas eu le temps de tester.

Voici le Stack Overflow post où j'ai rencontré le même problème.

Je n'ai pas encore plongé dans les informations d'identification CORS. Je n'ai pas vu d'exemple où ils sont nécessaires, alors il est probable que vous soyez en sécurité avec crossorigin (c'est-à-dire `crossorigin =" anonymous ").

1
Michael Crenshaw