Securing Azure SignalR +Azure App Service - Part 1
Tags: azure, azuresignalr, security, webdev
Published: 2021-05-24 14:09:13

Recently I start to explore the [Azure SignalR Service](https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-overview) for one of my chat based web wpplication.

> Azure SignalR Service simplifies the process of adding real-time web functionality to applications over HTTP. This real-time functionality allows the service to push content updates to connected clients, such as a single page web or mobile application. As a result, clients are updated without the need to poll the server or submit new HTTP requests for updates.

To put more simple word *Azure SignalR is a PaaS helps us to update the Client (UI) without refreshing the Page* - So Cool😎 Is it?

For that I need to come-up with a architecture, So I start doing a POC - "How to securely connect a Azure SignalR Service from a [simple ChatBased Application](https://github.com/aspnet/AzureSignalR-samples/tree/main/samples/ChatRoom)" ?

You can find more asp.net sample code for AzuresignalR from the below Repo.

{% github aspnet/AzureSignalR-samples %}

In this series of post, I am going to share the best practice / architecture on how to securely connect azuresignalr with azure app service.

## Let us create a POC Environment


### AzureSignalR 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o60r7ffem0898s7liywd.png)

I choose the resource group, service name and keep the rest of another configurations to default.

The main thing to note here is the [Service mode](https://docs.microsoft.com/en-us/azure/azure-signalr/concept-service-mode) i.e, how we are going to consume/connect to the azure signalr service

- Default mode- Using azure signalr for your Web application (Server based) - e.g., azure web App
- Serverless mode- Using azure signalr for your Web application (Serverless based) - e.g., static web apps, function apps

- Classic mode - Mixed of the above modes. This mode is for backward compatibility for those applications created before there is default and serverless mode. It is *strongly recommended to not use this mode anymore*


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u841lf8itlybp8rsjnbp.png)

Leave the *connectivity method* to the public endpoint for now, we will configure this later.

### Azure Web App

Create a simple webapp like below. Please keep an eye of the SKU/Size which you need at least the *Standard / Premium plan* that support secure network access.
  
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8rg1qur4lb1i38ltw8k.png)

### Deploy the Web Chat App

Once we provisioned our web app, we deploy the [ChatRoom](https://github.com/aspnet/AzureSignalR-samples/tree/main/samples/ChatRoom) in it.

After the deployment it’s time to update the azure signalr connection string to our app settings config variable called `Azure:SignalR:ConnectionString`


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2di78igg9cxhko92lfcc.png)
 
Finally, our site will look likes. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt7f8c4br8wvt9ombfo6.gif)

## Different connections in Azure Signalr service

Before diving into the security, we first need to understand how the azure signalr works behind the screen.

There are 2 different connections in azure signalr (sdk) as of now(24/May/2021)

- Server Connection *(Not Applicable for Serverless mode)*
- Client Connection *(Required for all modes)*


### Server Connection

Within your SignalR application, where you have a web server that hosts a *hub (called hub server)* and clients can have duplex real-time communication with the hub server

- A `negotiate` endpoint is exposed by Azure SignalR Service SDK for each hub.
- This endpoint will respond to client's negotiation requests and redirect clients to SignalR Service.
- Eventually, clients will be connected to SignalR Service.

#### Server connection flow

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5o12jwmm309opym63dl.png)
 
 

#### From the [Code](https://github.com/aspnet/AzureSignalR-samples/blob/main/samples/ChatRoom/Startup.cs#L31)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ceivmn143yoy3eclyci.png)


 

Please note that for serverless mode there is no server so we could not have a Hub server. So, this *server connection* will not be applicable for *serverless mode*.

### Client Connection

There are 2 steps to establish the persistent connection.

1.Client will call the negotiate request to app server which returns a redirect response with SignalR Service's URL and access token

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cr16rauakaruno8h1w7.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9y5k7w88s10t0hi1e7gd.png)

2.Client use the new URL and access token to make the persistent connection to SignalR

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u81jw38lbpiko4tcqxy3.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxregqoaig8mso1viu52.png)

WebSocket Connection:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vaseeqtr6si1i1ocq06.png)
   
#### Client Connection flow
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bonkg9zn2h2e6lbtqe65.png)
 
### Overall Flow 

**Default mode = Server Connection + Client Connection**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2ya86s6p4x6kuk4givt.png)



We will continue on how we secure our azure signalr connectivity to Azure web app in the upcoming parts.