ES6 module loader in the browser ignores cookies

Question

In a typical module script

<script type="module" crossorigin="use-credentials">
    import {App} from './js/app.js';
    const app = new App();
    app.init();
</script>

Chrome, Safari and Edge have no issues loading it and cookies are sent with request to js/app.js. FireFox 58 (with dom.moduleScripts.enabled set to true) does not attach cookies. Even those not marked HttpOnly. Chrome doesn't send them if use-credentials is not specified.

As many web apps respond with 302 redirect to login page, typical reaction in the console is Loading failed for the <script> with source “http://localhost/js/app.js”. or similar.

Of course, there are many ways to resolve it on the server side: allow JS modules to not require security checks, or place an auth token into the URL query. But it doesn't seem right.

What I am trying to understand, is there a definitive guide to the logic behind it? It used to be requests to the same origin, regardless of resource type, were carrying all cookies with them. Why would it be different for modules? Is there a magic attribute that makes it behave like the usual <script type="text/javascript" src=...></script> in regards to cookies?

Maybe it's just a bug/not yet implemented feature? Afaik, browser support for modules is still experimental — Bergi, Jan 30 '18 at 23:08
Thanks, @Bergi! It is indeed "in development" in FF, although this is the only issue I've seen, but it seems released and in full support in Chrome: https://www.chromestatus.com/feature/5365692190687232 - yet, I still have to specify "crossorigin" (without actually doing CORS here). This is what I want to understand in the first place, why is it needed. — Alex Pakka, Jan 31 '18 at 05:00
I remember there were issues with using credentials with preflight requests. https://stackoverflow.com/questions/15734031/why-does-the-preflight-options-request-of-an-authenticated-cors-request-work-in — Vladimir M, Feb 12 '18 at 09:28

score 1 · Accepted Answer · answered Jun 03 '18 at 01:24

The problem is fixed in FireFox 60.x.x - it attaches cookies correctly with crossorigin="use-credentials" attribute set, falling in line with other browsers, so, it must have been a bug. Also, dom.moduleScripts.enabled is true by default, so, it is safe to use modules with either: Chrome/Chromium, Firefox, Safari and Edge (16+) even if you check for session cookies on the server.

The logic behind including crossorigin="use-credentials" is similar to the one used by Fetch API and somewhat explained here MDN CORS Settings.

I guess using type="module" on the tag makes the browser either not use CORS at all with a result these requests are always anonymous and will have no security cookies. The only alternative is to follow CORS guidelines.

ES6 module loader in the browser ignores cookies

1 Answers1