Unable to connect to Azure SignalR service after deployment

Question

I have deployed an Azure SignalR service, also I have Azure Functions and Negotiate method with HTTPTrigger. After deployment Frontend + backend part, my frontend part cannot connect to SignalR service, but if I do it while proxy locally - it works. I suppose that the problem can be in my Azure Front Door. But I don't know where to look at Azure Frontdoor to access my SignalR.

I allowed CORS to * for the testing, but it does not work, looks like this is an Azure Front door blocks this, because we have a policy not to access to our service from public network. So I try yo understand how to fix an issue, any ideas? I tried to google up, but looks like it is not a fully clear CORS error. Thanks in advance!

This is an error I have from UI:

this is a code from UI:

const connection = new signalR.HubConnectionBuilder()
      .withUrl(url, {
          withCredentials: false,
      })
      .withAutomaticReconnect()
      .configureLogging(signalR.LogLevel.Information)
      .build();

This is my backend function inside function app:

[FunctionName(nameof(Negotiate))]
public SignalRConnectionInfo Negotiate(
    [HttpTrigger(AuthorizationLevel.Function)] HttpRequest req,
    [SignalRConnectionInfo(HubName = "notificationsSignalR", ConnectionStringSetting = "AzureSignalRConnectionString")] SignalRConnectionInfo connectionInfo)
{
        return connectionInfo;
}

This is my deployment script(it successfully deployed, connection string is presented in function app):

param namespace_name string 
param location string = resourceGroup().location

resource signalR 'Microsoft.SignalRService/signalR@2023-02-01' = {
  name: namespace_name
  location: location
  sku: {
    capacity: 2
    name: 'Standard_S1'
    tier: 'Standard'
  }
  kind: 'SignalR'
  identity: {
    type: 'SystemAssigned'
  }
  properties: {
    tls: {
      clientCertEnabled: false
    }
    features: [
      {
        flag: 'ServiceMode'
        value: 'Serverless'
        properties: {}
      }
      {
        flag: 'EnableConnectivityLogs'
        value: string(true)
      }
    ]
    cors: {
      allowedOrigins: [
        '*'
      ]
    }
    serverless: {
      connectionTimeoutInSeconds: 30
    }
    networkACLs: {
      defaultAction: 'Deny'
      publicNetwork: {
        allow: [
          'ClientConnection'
        ]
      }
      privateEndpoints: [
        {
          name: 'mySignalRService.1fa229cd-bf3f-47f0-8c49-afb36723997e'
          allow: [
            'ServerConnection'
          ]
        }
      ]
    }
    upstream: {
      templates: []
    }
  }
}

Exception says POLICY. See following : https://learn.microsoft.com/en-us/azure/governance/policy/overview — jdweng, Jul 29 '23 at 19:21
looks like it is related to https://learn.microsoft.com/en-us/azure/frontdoor/front-door-security-headers.. — Mykyta Halchenko, Jul 30 '23 at 21:06
Here is good link : https://learn.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-7.0#authorize-users-to-access-hubs-and-hub-methods — jdweng, Jul 30 '23 at 22:25
link good, but not for me, this is not Azure signalR, this is signalR + asp net core — Mykyta Halchenko, Jul 31 '23 at 09:54
Following paragraph in link is Azure : https://learn.microsoft.com/en-us/aspnet/core/signalr/authn-and-authz?view=aspnetcore-7.0#use-authorization-handlers-to-customize-hub-method-authorization — jdweng, Jul 31 '23 at 12:32

score 3 · Accepted Answer · answered Aug 08 '23 at 13:26

Firstly, I extended( as error says ) this rule in Azure Front Door:

FROM:

"default-src 'self' *.my.com graph.microsoft.com"

TO:

"default-src 'self' *.my.com graph.microsoft.com *.service.signalr.net"

After that fix I found second similar error: Refused to connect to 'wss://.....service.signalr.net........' because it violates the following Content Security Policy directive: "default-src 'self' *.my.com graph.microsoft.com *.service.signalr.net". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback

this is because Azure Front Door does not support Web Sockets, see: https://github.com/MicrosoftDocs/architecture-center/issues/1891#issuecomment-805714146

So, for me was applicable switching from WebSockets to Server Side Events(SSE) because I use direction only from Server to Client. After that, everything started working.

I hope my answer could be helpful for someone.

Unable to connect to Azure SignalR service after deployment

1 Answers1