About esmodule crossorigin

[19Qingfeng]

Hey, guys.I have some questions that I can't find by consulting the MDN documentation. I hope I can get the answers in the community.

It's about some questions about <script />, classic script tag has corssorigin attribute, I can understand what they stand for.

but for the <script type="module" />, When I don't have any configuration about corssorigin, Just getting my server to support cors: Access-Control-Allow-Origin: *.

And then I can get script detailed error on window.onerror, It looks like <script crossorigin="anonymous" />. I want to know what is the difference between the <script type="module" /> and <script crossorigin="anonymous" /> in the case of cors, or can I understand them as the same in a sense?

I went through the documents and did not find this part of the explanation. I hope the community can help me. Thank you.

[hamishwillee]

<script> of type="module" require the use of the CORS protocol for cross-origin fetching (unlike normal scripts). If you don't set crossorigin then for a module my understanding is that the credentials mode is "omit" and cookies are never sent/received. Further, if the server doesn't set the appropriate allow headers then the script is not allowed to be loaded even for same-origins.

This differs from normal scripts where not setting cross-origin means that you haven't "opted in" to CORS and the request just obeys the same-origin policy - effectively this is the same as setting cross-origin to anonymous. In this case the server will just return the non-credentialed requested resources by default.

I think that answers your question.

@teoli2003 IMO @19Qingfeng is correct that this is not obvious - I had to do a bit of research and it is still possible that I am wrong above. I propose the following fixes might help.

• crossorigin - this assumes classic scripts and says things like "By default (that is, when the attribute is not specified), CORS is not used at all.". SO this needs a general update to mention module scripts do require server headers and appropriate request headers, even for same-origin.
• We need to link to meaning of "omit" for credentials mode, but I can't find a good link for that - is there one? The explanation of it I found came from https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
• This page and others refer to the "credentials flag" - e.g. Request uses CORS headers and credentials flag but there is no link to what the credentials flag is. Is there a good link for that we should be using?
• We should not that modules are treated differently for CORS in the list here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts because you need to find this when you're looking into modules.
• Perhaps expand on the comment here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type#module "Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching." to note what this actually means. Which is to say that the server must serve the right headers to allow modules to be shared cross origin.
• Clarify exactly what happens if you don't specify any crossorigin for normal scripts - as above my assumption is that there are no rules at all related to cors applying, but it could be that anonymous applies. Docs don't make this clear.

Thoughts? Any other areas missing? Is there a CORS expert we can defer this to, or ask for particular review?

[19Qingfeng]

1. I think there are some things I still don't understand. It seems that the latest < script type=module / > has turned cors into same-origin instead of omit. Secondly, I did not check whether type=module is equivalent to anonymous or use-credentials when crossorigin is not set, because it involves whether I should declare < script type= "module" crossorigin= "anonymous / >", which looks exactly like the same effect as < script type= "module" / > .

2. Meanwhile, for preload & modulepreload. If I want to use preload to load the module script, can I use < link rel= "preload" href= "xxx" / > with < script type= "module" src= "xxx" / >? I'm not sure whether this will result in a second request for resources. I need to give it a try.
   Going back to the initial question, I am still confused about the default value when < script type= "module" / > is declared as crossorigin.

[hamishwillee]

The spec has changed further than that link https://html.spec.whatwg.org/multipage/webappapis.html#module-script.

My guess is that they are the same, except that classic scripts will be loaded for same origin even if the CORS headers are not set, while modules will not load unless the headers are used.

But I am unable to untangle this in a timely manner and be "sure" so I will try to loop in some people who actually know the answers.