12

I’d like to include some preconnect resource hints on my site so that browsers can (for example) connect to the jQuery CDN before they actually see the script tag that invokes the CDN. I’m not sure whether I should include the “crossorigin” attribute or what its value should be. The spec says, in part,

To initiate a preconnect, the user agent must run these steps:

[…]

  1. Let corsAttributeState be the current state of the element's crossorigin content attribute.
  2. Let credentials be a boolean value set to true.
  3. If corsAttributeState is Anonymous and origin is not equal to current Document's origin, set credentials to false.
  4. Attempt to obtain connection with origin and credentials.

I don’t know how to interpret this algorithm. If I’m preconnecting to a CDN, which will let anyone download its content without any sort of credentials, what value should I use for the “crossorigin” attribute?

3

I was searching for the same thing and I found this

It states here that if you don't use cross origin attribute the user agent just does the dns lookup but doesn't establish connection with the particular domain. So crossorigin attribute is needed if you have to preconnect to cross domain, like this:

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

Also if you want to send some credentials to that particular cross domain you can set the value to crossorigin as crossorigin = use-credentials otherwise I think the default value is anonymous.

  • This is half-true. If CORS is used (as it is with fonts), only the DNS lookup will be used with the font request. (The connection still happens, but it's not shown in the waterfall chart because a separate connection must be opened for the CORS request.) If you're fetching a script, using crossorigin will similarly waste a connection, because a new connection must be opened that doesn't use CORS. – Michael Crenshaw Apr 30 at 20:28
2

So far i understand the usage of crossorigin, specially in terms of its values anonymous and use-credentials, you should use crossorigin="use-credentials"in case:

  • you use assets, like images or videos, which have a crossorigin attribute
  • you plan to carry cookies, HTTP authentication, and client-side SSL certificates between origins, based on the user agent's previous interactions with the origin.

Additionally to the documentation cited by you i got this and that. But indeed the documentation is misleading and contains misspelling: the first calls it use-credentials, the second - user-credentials.

Anyway, in my understanding:

  • no crossorigin at all equals crossorigin="anonymous"
  • crossorigin equals crossorigin="use-credentials"

Maybe somebody would correct me.

PS: The current version of Mozilla page to the subject means:

An invalid keyword and an empty string will be handled as the anonymous keyword.

Means: no crossorigin at all, crossorigin or crossorigin="use_credentials" are all handled as crossorigin="anonymous".

  • 2
    I believe, as mentioned in MDN, By default (that is, when the attribute is not specified), CORS is not used at all. Also, setting only crossorigin is equal to crossorigin="anonymous". – Shakespear Mar 22 at 13:23
1

It depends on two things:

  1. The type of assets to be downloaded (which determines whether CORS will be used)
  2. Whether the target server uses credentials for CORS connections

For jQuery, you would not use crossorigin. Scripts are not among the types of resources browsers use CORS to download.

Fonts, on the other hand, use CORS.

  • If the page will only fetch resources that use CORS, include the crossorigin attribute.
  • If the page will only fetch resources that don't use CORS, omit crossorigin. If
  • If the page will fetch both kinds of resources, you may need two resource hints. (Full disclosure, the link is to my personal site. :-)) Someone pointed out that you might not need two hints for HTTP/2. I haven't had time to test.

Here's the Stack Overflow post where I encountered the same issue.

I haven't dived into when CORS credentials are necessary. I haven't seen an example where they're needed, so chances are you're safe with crossorigin (i.e. `crossorigin="anonymous").

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.