.NET 6 Sizzling Reload and “Refused to hook up with ws: as a result of it violates the Content material Safety Coverage directive” as a result of Net Sockets


    When you’re enthusiastic about Sizzling Reload like me AND you additionally need an “A” grade from SecurityHeaders.com (actually, go do this now) then you’ll be taught in a short time about Content material-Safety-Coverage headers. You must spend a while studying and chances are you’ll find yourself with a considerably subtle listing of allowed issues, scripts, stylesheets, and so forth.

    In DasBlog Core (the cross platform weblog engine that runs this weblog) Mark Downie makes these configurable and makes use of the NWebSpec ASP.NET Middleware library so as to add the wanted headers.

    if (SecurityStyleSources != null && SecurityScriptSources != null && DefaultSources != null)
    app.UseCsp(choices => choices
    .DefaultSources(s => s.Self()
    .StyleSources(s => s.Self()
    .ScriptSources(s => s.Self()

    Every of these variables comes out of a config file. Sure, it will be extra safety in the event that they got here out of a vault or had been even onerous coded.

    DasBlog is a pretty big and funky app and we observed instantly upon Mark upgrading it to .NET 6 that we had been unable to make use of Sizzling Reload (by way of dotnet watch or from VS 2022). We are able to complain about it, or we will find out about the way it works and why it isn’t working for us!

    Bear in mind: Nothing in your pc is hidden from you.

    Beginning with a easy “View Supply” we will see a JavaScript embrace on the very backside that’s positively not mine!

    <script src="http://feeds.hanselman.com/_framework/aspnetcore-browser-refresh.js"></script>

    Okay, this is sensible as we all know not solely does HotReload assist C# (code behinds) but in addition Markup by way of Razor Pages and altering CSS! It could positively want to speak “again dwelling” to the runner which is both “dotnet watch” or VS2022.

    If I alter the ASPNETCORE_ENVIRONMENT to “Manufacturing” (both by way of launch.json, launchsettings, or an setting variable like this, I can see that additional HotReload helper script is not there:

    C:githubwshotreloadtest>dotnet run --environment="Manufacturing"
    information: Microsoft.Internet hosting.Lifetime[14]
    Now listening on: https://localhost:7216
    information: Microsoft.Internet hosting.Lifetime[14]
    Now listening on: http://localhost:5216

    Bear in mind: You by no means need to use dotnet run in manufacturing! It is an SDK constructing command! You may need to use dotnet exec your.dll, dotnet your.dll, or better of all, in .NET 6 simply name the EXE immediately! .binDebugnet6.0wshotreloadtest.exe in my instance. Why? dotnet run will at all times assume it is in Improvement (you actually inform it to revive, construct, and exec in a single run command) in the event you run it. You may be aware that working the precise EXE is at all times WAY quicker as properly! Do not ship your .NET SDK to your webserver and do not recompile the entire thing on startup in manufacturing!

    We are able to see that that aspnnetcore-browser-refresh.js is the shopper aspect of Improvement-time HotReload. Taking a look at our browser console we see :

    Refused to Connect because it violates a CSP Directive

    Refused to hook up with 'wss://localhost:62486/' 
    as a result of it violates the next Content material Safety Coverage
    directive: "default-src 'self'".
    Notice that 'connect-src' was not explicitly set,
    so 'default-src' is used as a fallback.

    That is quite a bit to consider. I began out my ASP.NET Net App’s center ware saying it was OK to speak “again to myself” however nowhere else.

    app.UseCsp(choices => choices.DefaultSources(s => s.Self())); 

    Hm, self appears affordable, why cannot the browser join BACK to the dotnet run’ed Kestrel Net Server? It is all localhost, proper? Effectively, particularly it is http://localhost not ws://localhost, and even wss://localhost (that additional s is for safe) so I must explicitly enable ws: or wss: or each, however solely in Improvement.

    Possibly like this (once more, I am utilizing NWebSpec, however these are simply HTTP Headers so you possibly can actually simply add them in order for you, hardcoded.)

    app.UseCsp(choices => choices.DefaultSources(s => s.Self())
    .ConnectSources(s => s.CustomSources("wss://localhost:62895")));

    However port numbers change, proper? Let’s do exactly wss:, solely in Improvement. Now, if I am utilizing each CSPs and WebSockets (ws:, wss:) in Manufacturing, I am going to have to be intentional about this.

    What is the ethical?

    When you begin utilizing CSP Headers to tighten issues up, be acutely aware and conscious of the headers you want for conveniences like Sizzling Reload in Improvement versus no matter issues chances are you’ll want in Manufacturing.

    Hope this helps prevent a while!

    Sponsor: At Rocket Mortgage® the work you do round right here will probably be 100% impactful however received’t take all of your free time, providing you with the right work-life steadiness. Or as we name it, tech/life steadiness! Be taught extra.

    About Scott

    Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, marketing consultant, father, diabetic, and Microsoft worker. He’s a failed stand-up comedian, a cornrower, and a guide writer.

    About   E-newsletter

    Internet hosting By
    Hosted in an Azure App Service


    Please enter your comment!
    Please enter your name here