How do I know if a resource needs a `crossorigin` attribute or not?

While implementing some “preconnect” links on a site the other day, I needed to determine whether or not the domains that I wanted to preconnect to needed the crossorigin attribute.

And I was shocked to find that Google was not very helpful…

Searches for things like “how to tell if a resource needs crossorigin” or “devtools resource check crossorigin” returned result-after-result of something like “here’s how to implement crossorigin” or endless articles explaining what CORS is, but all in such engineering-speak that I could make neither heads nor tails of how to check a resource…

What I was looking for was something like:

  1. Open a page in my browser,
  2. Click a resource in DevTools,
  3. Somehow know whether it needs crossorigin or not…

I finally found my answer, thanks to :

Requests with sec-fetch-mode: cors is normally a pretty good hint that a preconnect needs the crossorigin / crossorigin="anonymous” attribute

Which should look something like this:

Check if a resource is crossorigin in DevTools
In Devtools, go to the Network panel, select the resource, click the Headers tab, then scroll down to the Request Headers and look for “Sec-Fetch-Mode”

And being a very thoughtful and thorough individual, Andy even made sure to clarify that “(empty attribute is the same as anon)”. :-)

So, for anyone else out there that is looking for this answer (including future-me), there it is…

Happy crossorigining,

2 Responses to How do I know if a resource needs a `crossorigin` attribute or not?

  1. […] How do I know if a resource needs a `crossorigin` attribute or not? (Aaron T. Grogg) […]

  2. Harry Roberts does a more thorough write-up (as you might expect), maybe some additional nuggets for you:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.