Add query string to dotnet.js to fix Blazor displaying blank page after framework upgrade

[MrJAnderson]

Summary

In production environments client browsers will cache dotnet.js and blazor.web.js files. These files do not currently have any query strings appended which means they are not reloaded when a newer framework version is deployed. This results in a blank/white screen being presented to users with no clear indication why.

Motivation and goals

After updating a solution to the latest version with slightly newer dotnet will cause users to encounter issues with browser caching the dotnet.js file which won't get reloaded. This results in a blank/white screen until the cache expires or is refreshed (eg: Ctrl+F5)

In scope

All files underneath the _framework/ path should have this applied to them if they are loaded by blazor.webassembly.js.

Out of scope

Files referenced within the .razor files directly should be out of scope for example blazor.web.js. As Users can specify this as <script src="_framework/blazor.web.js?v=8.0.6"></script> but should ideally be dynamically assigned.

The base template should be updated to have something similar.

Risks / unknowns

Security concern as the reference directly exposes the version which might allow for targeted attacks.
How can the version be automatically assigned to prevent rework in the future?

Examples

let t="_framework/dotnet.js?v=8.0.6";if(e.loadBootResource){const n="dotnetjs",r=e.loadBootResource(n,"dotnet.js?v=8.0.6",t,"","js-module-dotnet");

[javiercn]

@MrJAnderson thanks for contacting us.

Our plan is to perform fingerprinting on the files on .NET 9.0 and use an ImportMap. #54874

That said, this should not be a problem if you are running hosted, as we already serve the appropriate caching headers.

[dotnet-policy-service]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.