Run & review this pull request in StackBlitz Codeflow.

We are hitting an issue with the modulePreload links getting blocked on Firefox due to the crossorigin being defaulted to anonymous and thus not including the credentials for those requests. This PR seems like it would resolve that issue and allow overriding the default behavior.

Are there any updates on this PR getting in? Or is there any workaround? Either via plugins or overriding the polyfill?

It would also be good to make use of this new option in html.ts so that the newly created link tags use the credentials as well.

Something along the lines of the following, which is what worked for the Firefox issue due to the way polyfill relies on crossorigin to set the credentials:

@@ -23,7 +23,7 @@ import {
   processSrcSet,
   removeLeadingSlash,
 } from '../utils'
-import type { ResolvedConfig } from '../config'
+import type { ModulePreloadOptions, ResolvedConfig } from '../config'
 import { toOutputFilePathInHtml } from '../build'
 import { resolveEnvPrefix } from '../env'
 import {
@@ -625,12 +625,13 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
         chunk: OutputChunk,
         toOutputPath: (filename: string) => string,
         isAsync: boolean,
+        crossorigin: ModulePreloadOptions['crossOrigin'],
       ): HtmlTagDescriptor => ({
         tag: 'script',
         attrs: {
           ...(isAsync ? { async: true } : {}),
           type: 'module',
-          crossorigin: true,
+          crossorigin: crossorigin ?? true,
           src: toOutputPath(chunk.fileName),
         },
       })
@@ -638,11 +639,12 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
       const toPreloadTag = (
         filename: string,
         toOutputPath: (filename: string) => string,
+        crossorigin: ModulePreloadOptions['crossOrigin'],
       ): HtmlTagDescriptor => ({
         tag: 'link',
         attrs: {
           rel: 'modulepreload',
-          crossorigin: true,
+          crossorigin: crossorigin ?? true,
           href: toOutputPath(filename),
         },
       })
@@ -736,12 +738,16 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
           // when inlined, discard entry chunk and inject <script> for everything in post-order
           const imports = getImportedChunks(chunk)
           let assetTags: HtmlTagDescriptor[]
+          const { modulePreload } = config.build
+          const { crossOrigin } = modulePreload as ModulePreloadOptions
           if (canInlineEntry) {
             assetTags = imports.map((chunk) =>
-              toScriptTag(chunk, toOutputAssetFilePath, isAsync),
+              toScriptTag(chunk, toOutputAssetFilePath, isAsync, crossOrigin),
             )
           } else {
-            assetTags = [toScriptTag(chunk, toOutputAssetFilePath, isAsync)]
+            assetTags = [
+              toScriptTag(chunk, toOutputAssetFilePath, isAsync, crossOrigin),
+            ]
             const { modulePreload } = config.build
             if (modulePreload !== false) {
               const resolveDependencies =
@@ -756,7 +762,7 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
                 : importsFileNames
               assetTags.push(
                 ...resolvedDeps.map((i) =>
-                  toPreloadTag(i, toOutputAssetFilePath),
+                  toPreloadTag(i, toOutputAssetFilePath, crossOrigin),
                 ),
               )
             }

I think a global option makes more sense here. Do you see a reason to use a different crossOrigin for regular script tags and preload tags? Maybe build.html.crossOrigin. We don't have other similar options though. I'll add this PR to the team's board so we get to discuss it in a future team meeting.

For our use case, the entire app requires credentials to load (all assets including the bundle). So, for our immediate use case, there wouldn't be a need for a separate option for regular tags and preload tags.

It'd be good to have the preloading work the same way as Chromium given that there are no issues there with preloading the bundle.

@patak-dev

I think a global option makes more sense here. Do you see a reason to use a different crossOrigin for regular script tags and preload tags?

Thanks for taking a look at this PR! A global option like build.html.crossOrigin does make more sense when including the additions mentioned by @ketulm. I opted for extending the existing config option since the original goal for this PR was to affect the module preload scripts only. If the team agrees on making this a global option for the html output, I can update the PR to address that feedback.

Cheers

Do you see a reason to use a different crossOrigin for regular script tags and preload tags?

The static/dynamic imports uses the same crossorigin value (tc39/proposal-dynamic-import#60, spec). This means that a single crossorigin value is used for the whole module graph. So a preload tag should always use the same crossorigin value with the script tag. Otherwise the preload will be meaningless.

Given that CSP nonce also needs to add a attribute to <link rel="modulepreload"> (#14653), that might be also put in build.html. (Although, for nonce, it can be obtained from the HTML)

Also I was thinking about whether we can get the crossOrigin value automatically. But I didn't find a way to do that.
I thought it's possible to get it by checking the script tag. But for the following example, I guess mod3.js will be fetched with credentials sometimes and without it sometimes.

<script type="module" src="mod1.js" crossorigin /> <!-- mod1.js imports mod3.js -->
<script type="module" src="mod2.js" crossorigin="use-credentials" /> <!-- mod2.js imports mod3.js -->

Even if we ignore this case, there's still a problem. For the following example, we need to detect which script tag is the one importing mod3.js.

<script type="module" src="mod1.js" crossorigin /> <!-- mod1.js doesn't import mod3.js -->
<script type="module" src="mod2.js" crossorigin="use-credentials" /> <!-- mod2.js imports mod3.js -->

If Vite is generating the HTML, we can inject a marker (e.g. add vite-bundle-id attribute to script tag). But that requires the frameworks/backend integrations to inject that.

什么时候才能增加该功能