Vite - Add required crossorigin attribute to modulepreload

[indykoning]

Laravel Version

11.30.0

PHP Version

8.3

Database Driver & Version

No response

Description

CORS (the crossorigin parameter) is required when dealing with scripts of type="module" or rel="modulepreload"
whatwg/html#1888

Thus adding these links as headers will prove ineffective both in Http/2 ServerPush and Http/3 Early Hints.
We might want to default the crossorigin parameter to anonymous to ensure preloading will always be effective.

framework/src/Illuminate/Foundation/Vite.php

Line 698 in ca0617a

'crossorigin' => $this->resolveScriptTagAttributes($src, $url, $chunk, $manifest)['crossorigin'] ?? false,

Steps To Reproduce

Set up your regular laravel project, run yarn && yarn run build
add the link elements to the link header.

In a clean Laravel installation update your web.php to reflect

    return response(view('welcome'))->header('Link', '<http://laravel.test/build/assets/app-<your hash>.js>; as=script; rel=preload');

See the console warning in your browser claiming the preload has not been used due to incompatible crossorigin between your link headers and your script.

Also note in the network tab how the script is downloaded twice.

First during the preload, but since that is thrown away. The second time because it finds the script in your html.

[timacdonald]

I'm unable to reproduce this issue.

Set up a fresh laravel breeze application with Link headers applied to the urls and do not have any issues.

Will need more comprehensive reproduction steps to dig into this further.

[indykoning]

I've updated the reproduction steps and added some screenshots.
My current fix is to force the crossorigin="anonymous" attribute in

Vite::useScriptTagAttributes([
    "crossorigin" => "anonymous"
]);

or when collecting link elements to place into the link header

[timacdonald]

@indykoning, I think this might be because you are using rel=preload' instead of rel=modulepreload", which will cause the double download and why the browser is saying it is not used.

Either way, I'd recommend ditching any manual work and ensure that the \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class middleware is applied to your routes so this is all handled automatically.

[indykoning]

Awesome! I didn't know that middleware was built in!

It will not fully utilise early hints CDNs offer as that only supports preconnect and preload
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103#browser_compatibility
But that's out of the scope of this issue, and honestly out of Laravels scope I reckon.

I've fixed it in
https://github.com/justbetter/laravel-http3earlyhints
where it is in scope.

@indykoning, I think this might be because you are using rel=preload' instead of rel=modulepreload", which will cause the double download and why the browser is saying it is not used.

I can confirm this is not a problem luckily, using early hints with Cloudflare this way with crossorigin added, it luckily downloads and parses it once!

Thank you for looking into this!

[timacdonald]

Based on the documentation on the Cloudflare docs, the modulepreload tag is considered to automatically generate early hint headers.

Of note for this conversation, adding any other attribute, including crossorigin, will stop Cloudflares the automatic generate of early hints.

https://developers.cloudflare.com/pages/configuration/early-hints/

Glad you got it sorted!

[indykoning]

You're awesome looking into it this deep!

By the looks of this topic as well, it wasn't possible but it should be now to use modulepreload!
https://community.cloudflare.com/t/support-rel-modulepreload-for-automatic-link-header-generation/550051

The documentation indeed says crossorigin is not supported, which i agree with the PS on the community topic, is an odd choice... Especially since fonts are required to have a crossorigin
But they must have their reason.

Weirdly enough that conflicts with what my experience is during testing

Or perhaps they mean that they will not cache the script on their CDN in that case?

Anyhow, i've got some more testing and checking to do for my package! By the looks of it

Edit:
I see why this confusion exists, this is the docs of Cloudflare cache: https://developers.cloudflare.com/cache/advanced-configuration/early-hints/#generate-early-hints

with preconnect or preload rel types

And then you have the docs of Cloudflare pages: https://developers.cloudflare.com/pages/configuration/early-hints/#2-automatic-link-header-generation

(one of preconnect, preload, or modulepreload)
And the exception of crossorigin, fetchpriority, etc.

In a perfect world Cloudflare Cache/CDN accepts modulepreload and transforms it into a preload with crossorigin for early hints.
As you can read here, modulepreload already implies crossorigin="anonymous"
Thus current implementation in Laravel is without a doubt correct, just not compatible with how Cloudflare/browsers deal with early hints. It is compatible and passes all the right data for ServerPush

[timacdonald]

Love this. Thanks for sharing you findings on all this.