69

With Google Chrome or Firefox, if I try to load the following HTML:

<script crossorigin='anonymous' src='https://stackoverflow.com/foo.js'></script>

I get a CORS error like this:

Access to Script at 'https://stackoverflow.com/foo.js' from origin 'https://stackoverflow.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...

However, the same tag without the crossorigin='anonymous' attribute works fine (of course generating a 404 error, since foo.js does not exist).

This is surprising, since anonymous is just supposed to prevent sending any credentials, and script tags are not supposed to require CORS. What is causing this, and what should I do?

4 Answers 4

69

I was confused about this for a while. Here's how I now understand it:

According to the W3C, there are actually three possible values for the crossorigin attribute: anonymous, use-credentials, and an "missing value default" that can only be accessed by omitting the attribute. (An empty string, on the other hand, maps to anonymous.) The default value causes the browser to skip CORS entirely, which is the normal behavior I was expecting.

The crossorigin attribute should only be used if we care about getting error information for the script being loaded. Since accessing this information requires a CORS check, the Access-Control-Allow-Origin header must be present on the resource for it to be loaded.

7
  • I'll leave this unaccepted for a while in case anyone wants to write up a better explanation!
    – pdg137
    Dec 19, 2016 at 19:12
  • pdg137 you just need to make your server returning this response header on the JS file : Access-Control-Allow-Origin:*
    – Jerem
    Dec 22, 2016 at 16:02
  • 1
    Yes, that would help, but often I can't or don't want to do that. Specifically, when loading third party scripts.
    – pdg137
    Dec 22, 2016 at 16:54
  • They say "missing value default", not "missing default value". See the difference? Your answer is confusing, there is no such thing here as "Unnamed default value". It is just anonymous, use-credentials or no attribute. It's not default value that skips CORS, it's missing attribute ONLY.
    – Robo Robok
    Jan 22, 2017 at 19:23
  • I edited this in an attempt to make it more clear; please let me know if that helps.
    – pdg137
    Jan 22, 2017 at 20:24
28

crossorigin attribute has only two possible values: anonymous or use-credentials. Any value other than anonymous, including empty value, will be translated to anonymous.

So these three tags have the same meaning:

<script src="https://stackoverflow.com/foo.js" crossorigin="anonymous">
<script src="https://stackoverflow.com/foo.js" crossorigin="">
<script src="https://stackoverflow.com/foo.js" crossorigin="IamCrazy">

What is interesting though, is that CORS behavior is totally disabled if you skip crossorigin attribute. For example:

<script src="https://stackoverflow.com/foo.js">

This tag will run script without any CORS-related checking. In practice, no crossorigin attribute makes browser skip Origin HTTP header entirely.

No matter if your crossorigin is anonymous or use-credentials, request's Origin must still match response's Access-Control-Allow-Origin. Otherwise no luck - script is never fired.

Source: HTTP access control (CORS) on Mozilla Developer Network

4
  • 2
    This is wrong. OR it is right but Chrome's implementation does not match this. Apr 7, 2017 at 3:37
  • 1
    @WilliamEntriken what specifically works different in Chrome? I tested it again today and it looks like my answer is still correct. There are just three behaviors of crossorigin: allow all (no attribute at all), send credentials (crossorigin="use-credentials") and skip credentials (any value other than use-credentials), officially anonymous, unofficially can be anything, including empty value.
    – Robo Robok
    Jan 30, 2019 at 13:32
  • 4
    It's also very clearly stated in the documentation I linked: "An invalid keyword and an empty string will be handled as the anonymous keyword.".
    – Robo Robok
    Feb 2, 2019 at 9:11
  • I think, that CORS can kick in AFTER resource is fetched when no crossorigin is used. As I understand, crossorigin="anonymous" forces preflight for that request while ommiting it will still enforce CORS rules but after it is fetched since no preflight is beeing made. Am I correct ? Jan 11 at 12:04
5

It's a bit old thread, but it's something that I happened to encounter, these days. In addition to the crossorigin, you should also make sure that the server from which you are loading the script (in your example - stackoverflow.com) returns a specific header.

'Access-Control-Allow-Origin' '*';

Only then you will be able to receive the full information about an errors which has happened in the script.

Of course if you know for sure which url to allow you should use it instead of the asterisk '*'.

5
  • 4
    Don't put a wildcard * unless you know what you are doing. Much better to put: Access-Control-Allow-Origin: https://requestingserver.com replacing the domain with the domain of the requesting server.
    – Flimm
    Nov 2, 2019 at 10:37
  • What is the difference in security value between having a * and having the value of the requesting server ? I don't see any value upgrade. Apr 13, 2020 at 20:20
  • The '*' allows all the possible servers, rather than a specific value. Apr 14, 2020 at 11:15
  • I know. My question is without allow-credentials: true, what is the risk here ? Apr 27, 2020 at 1:26
  • And What Flimm is suggesting: "replacing it with the domain of the requesting server", that doesn't seem to offer any value upgrade in terms of security. Infact, reflecting the origin of the request (coupled with allow credentials:true) can introduce a security vulnerability in servers that uses cookies for authentication Apr 27, 2020 at 1:30
3

This is surprising, since anonymous is just supposed to prevent sending any credentials, and script tags are not supposed to require CORS. What is causing this

The use of the word "just" there is incorrect.

See MDN on onerror:

When an error occurs in a script, loaded from a different origin, the details of the error are not reported to prevent leaking information (see bug 363897). Instead the error reported is "Script error." This behavior can be overridden in some browsers using the crossorigin attribute on <script> and having the server send the appropriate CORS HTTP response headers.

Adding any crossorigin attribute value is supposed to allow you to do things which require CORS permission. In the case of a script that is to get useful error messages reported to onerror as shown in the quote above.

The cost of that is that you now require CORS permissions to do anything with the data. In the case of a script element, that includes executing the script (which, as you pointed out, normally doesn't require CORS permission).

The difference between anonymous and use-credentials is that the latter will also:

  • Require a pre-flight OPTIONS request to get permission to send credentials (such as any cookies) before it will make the GET request for the script
  • Send any credentials in that GET request for the script

what should I do?

You can either:

  • Not use the crossorigin attribute (which will send any credentials (such as cookies) to the server unless they get blocked by a third-party cookies policy in the browser)
  • Have the server grant permission using the Access-Control-Allow-Origin response header
  • Move the script to a different domain which doesn't have credentials associated with it (e.g. you could have www.example.com with cookies and cdn.example.com without).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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