cookies - 浏览器中的 ES6 模块加载器会忽略 cookie

Question

在典型的模块脚本中

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

Chrome、Safari 和 Edge 加载它没有问题，cookie 随请求发送到 js/app.js . FireFox 58( dom.moduleScripts.enabled 设置为 true)不附加 cookie。甚至那些没有标记的 HttpOnly .如果 use-credentials，Chrome 不会发送它们未指定。

由于许多 Web 应用程序响应 302 重定向到登录页面，因此控制台中的典型 react 是 Loading failed for the <script> with source “http://localhost/js/app.js”.或类似的。

当然，有很多方法可以在服务器端解决它:允许 JS 模块不需要安全检查，或者在 URL 查询中放置一个 auth token 。但这似乎不对。

我想了解的是，是否有明确的指南来说明其背后的逻辑？它曾经是对同一来源的请求，无论资源类型如何，都带有所有 cookie。为什么模块会有所不同？是否有一个神奇的属性让它表现得像通常的 <script type="text/javascript" src=...></script>关于 cookies ？

Answer 1

该问题已在 FireFox 60.x.x 中得到修复 - 它使用 crossorigin="use-credentials" 正确附加 cookie属性设置，和其他浏览器一致，所以，肯定是bug。另外，dom.moduleScripts.enabled默认情况下为 true，因此，即使您在服务器上检查 session cookie，也可以安全地使用以下任一模块:Chrome/Chromium、Firefox、Safari 和 Edge (16+)。

包含 crossorigin="use-credentials"背后的逻辑与 Fetch API 使用的逻辑相似，此处稍作解释 MDN CORS Settings .

我想使用 type="module"标签上的标签使浏览器要么根本不使用 CORS，因此这些请求始终是匿名的，并且没有安全 cookie。唯一的选择是遵循 CORS 指南。