Refresh Browser After Build - iFrame and Content Security Policy Error

[CannyGent]

I have a .NET 5 Blazor application developed from the standard template using

• WASM App
• Hosted in ASP.NET Core
• PWA
• Individual User Accounts

I am running with Ctrl-F5 and Visual Studio configured to Refresh Browser After Build. When I look at the console in Chrome, I get the following error message:
Refused to load the script 'https://localhost:36001/_framework/aspnetcore-browser-refresh.js' because it violates the following Content Security Policy directive: "script-src 'sha256-fa5rxHhZ799izGRP38+h4ud5QXNT0SFaFlh4eqDumBI='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

When I look at the source using the inspector I observe that an iFrame has been inserted:
<iframe src="https://localhost:36001/connect/checksession" style="visibility: hidden; position: absolute; display: none; width: 0px; height: 0px;"></iframe>

This iFrame includes <script src="/_framework/aspnetcore-browser-refresh.js"></script>

What is causing this behaviour? In other projects I just see that script being inserted, not the iFrame and the reload works fine. The reload in this case is not working due to the CSP but even that is confusing because the script does not have an integrity attribute.

This seems to be a defect in the logic for how the Refresh functionality is injected. Any help would be much appreciated.

Thanks.

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. Because it's not immediately obvious that this is a bug in our framework, we would like to keep this around to collect more feedback, which can later help us determine the impact of it. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[CannyGent]

Hi - I have established how to reproduce... the content security policy errors are introduced when a user is logged in:

• Create a .NET 5 ASP.NET Core Blazor WASM application
• Use local user accounts for authentiction
• ASP.NET Core Hosted, PWA, HTTPS all checked

When you Ctrl-F5 the reload on changes works as expected.

Register a user account, log in as the user, then you get the Content Security Policy errors which break reload on changes.

[gbjbaanb]

I reported this to VS feedback that was closed as a duplicate of this issue.

The exception reported in my browser dev page was;

Exception { name: "", message: "", result: 2153644038, filename: "https://localhost:44394/_framework/aspnetcore-browser-refresh.js", lineNumber: 5, columnNumber: 0, data: null, stack: "@https://localhost:44394/_framework/aspnetcore-browser-refresh.js:5:18\nsetTimeout handler*@https://localhost:44394/_framework/aspnetcore-browser-refresh.js:1:11\n" }

Looking closer, I noted this;
Content Security Policy: The page's settings blocked the loading of a resource at ws://localhost:51621/mysite/

So I expect the problem is that the port number used is different to the website my pages are running on. It probably isn't an issue for production as this reload script shouldn't be used, but it is an obviously issue for development if the script isn't permitted! The problem though, is there is no workaround (assuming the ws: port is random) other than to turn CSP off in dev. Which would be inconvenient to say the least.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SteveSandersonMS]

For now we recommend manually adding the SHA for the injected script into your CSP. We know this is inconvenient but it's the best recommendation currently. Longer term we'll try to find a way to supply the SHA to your application dynamically.

[mikesigs]

@SteveSandersonMS Sorry I need you to ELI5. What SHA of what script? This issue is about the aspnetcore-browser-refresh.js not being loaded. So are we supposed to come up with the SHA for that file on our own? Then what? Sorry, this aspect of front-end development is foreign to me.

[CannyGent]

@mikesigs Just to say I never did crack this... I observed different behaviours if you change the listening port. For now in dev I am just back to 5001 and can get reload working on .NET 5. Fingers crossed all this is resolved satisfactorily for Blazor with the new hot reload functionality for .NET 6 / VS2022.

[Ponant]

Related and could help? #36085

[pranavkm]

Dupe of #33068. We'll use the other issue to track discussing / addressing this.