Icons don't display on Azure

🐛 Bug Report

FluentIcons don’t display on Blazor server app deployed to azure unless public access enabled

💻 Repro or Code Sample

Deploy a default template blazor app with a fluent icon somewhere on the index page and deploy to azure. It will appear. Now restrict inbound traffic to just your IP address. Open up a new browser and check the address ,- the icon will have disapeared

🤔 Expected Behavior

The icons display locally, but unfortunately after deploying to Azure they no longer display unless all inbound traffic is set to allowed, I’d expect them to display regardless as they are being accessed from the _content folder?

😯 Current Behavior

I am developing a Blazor Server app that is deployed on Azure uses Microsoft.Fast.Components.FluentUI for icons. They work fine locally but after deploying to azure, the icons don’t display and also cause errors of the type

````Error: System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception.``` (see fig3 for full stack trace) Strangely, if I change the inbound traffic access to public, [Networking-> inbound access ->Access restriction -> public], then these errors go away and the icons display (see fig 1) but this obviously isn’t a solution.

I set up live logging on app insights and weirdly the icons are returning 403s when the app service tries to access them - then the error above happens. I can access this url/display the image in the browser so strange the app service doesn’t authorize this. (see fig2) These icons are in the content folder so it’s strange they’re unauthorised. My question for you all; Has anyone an idea of what could be getting blocked and causing the icons not to show as it looks like that something that is blocked when we are using the private endpoint is causing the 403s and I’d like to figure out what.

I’d sincerely appreciate any help anyone could provide on this matter

Fig 1 open up inbound traffic to public

Fig 2 – 403 errors from application insights

Outgoing command
GET /_content/Microsoft.Fast.Components.FluentUI/icons/Phone/48_r.svg
Result code: 403
AspNetCoreEnvironment: Production
_MS.ProcessedByMetricExtractors:(Name:'Dependencies', Ver:'1.1')
url:https:/mysitehere.azurewebsites.net/_content/Microsoft.Fast.Components.FluentUI/icons/Phone/48_r.svg

Fig 3 Complete Error

``blazor.server.js:1 [2023-08-01T15:34:41.396Z] Error: System.Net.Http.HttpRequestException: The SSL connection could not be established, see inner exception.
---> System.IO.IOException:  Received an unexpected EOF or 0 bytes from the transport stream.
   at System.Net.Security.SslStream.ReceiveBlobAsync[TIOAdapter](CancellationToken cancellationToken)
   at System.Net.Security.SslStream.ForceAuthenticationAsync[TIOAdapter](Boolean receiveFirst, Byte[] reAuthenticationData, CancellationToken cancellationToken)
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at System.Net.Http.ConnectHelper.EstablishSslConnectionAsync(SslClientAuthenticationOptions sslOptions, HttpRequestMessage request, Boolean async, Stream stream, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.AddHttp11ConnectionAsync(QueueItem queueItem)
   at System.Threading.Tasks.TaskCompletionSourceWithCancellation`1.WaitWithCancellationAsync(CancellationToken cancellationToken)
   at System.Net.Http.HttpConnectionPool.HttpConnectionWaiter`1.WaitForConnectionAsync(Boolean async, CancellationToken requestCancellationToken)
   at System.Net.Http.HttpConnectionPool.SendWithVersionDetectionAndRetryAsync(HttpRequestMessage request, Boolean async, Boolean doRequestAuth, CancellationToken cancellationToken)
   at System.Net.Http.DiagnosticsHandler.SendAsyncCore(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, Boolean async, CancellationToken cancellationToken)
   at Microsoft.Extensions.Http.Logging.LoggingHttpMessageHandler.<SendAsync>g__Core|5_0(HttpRequestMessage request, CancellationToken cancellationToken)
   at Microsoft.Extensions.Http.Logging.LoggingScopeHttpMessageHandler.<SendAsync>g__Core|5_0(HttpRequestMessage request, CancellationToken cancellationToken)
   at System.Net.Http.HttpClient.<SendAsync>g__Core|83_0(HttpRequestMessage request, HttpCompletionOption completionOption, CancellationTokenSource cts, Boolean disposeCts, CancellationTokenSource pendingRequestsCts, CancellationToken originalCancellationToken)
   at Microsoft.Fast.Components.FluentUI.HttpBasedStaticAssetService.GetAsync(String assetUrl, Boolean useCache) in /_/src/Microsoft.Fast.Components.FluentUI/Infrastructure/HttpBasedStaticAssetService.cs:line 50
   at Microsoft.Fast.Components.FluentUI.FluentIcon.GetIconContentAsync() in /_/src/Microsoft.Fast.Components.FluentUI/Components/Icon/FluentIcon.cs:line 226
   at Microsoft.Fast.Components.FluentUI.FluentIcon.OnAfterRenderAsync(Boolean firstRender) in /_/src/Microsoft.Fast.Components.FluentUI/Components/Icon/FluentIcon.cs:line 162
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

💁 Possible Solution

Perhaps if I could find out what is being blocked I could allow it?

🔦 Context

🌍 Your Environment

• OS & Device: windows 10
• Browser [Google Chrome, edge]
• Blazor server Microsoft.Fast.Components.FluentUI 2.4.1

[vincemcc79]

Thank you Denis,

I actually deleted the question just after I posted it as it didn’t feel like to correct place to post this. Thanks very much for the response, that makes perfect sense.

[vnbaaij]

Your site’s base url