Step-by-Step: How to Configure a Private Endpoint to Secure Azure Static Web Apps

[Guest Anthony Bartolo]

Securing your web apps is essential in today's digital landscape. One method is to use a private endpoint, also known as a private link, in Azure Static Web Apps. This feature enables developers to connect network isolated backends to Azure Static Web Apps resources for increased security and seamless routing. In this blog post, we'll go through how to set up a private endpoint in Azure Static Web Apps and the advantages it has for keeping your web apps secure.

 

 

 

Now a private endpoint, also known as a private link, is a network interface that connects to your virtual network using a private IP address. This network interface links you privately and securely to an Azure Private Link-powered service. You introduce the service into your virtual network by enabling a private endpoint.

 

 

 

Let's have a look at how it works. An Azure Virtual Network (VNet) is a network similar to a typical data center network, except resources within the VNet communicate securely across the Microsoft backbone network. When you configure Static Web Apps with a private endpoint, you can utilize a private IP address from your VNet. Your static web app is connected into your VNet after this link is generated. As a result, your static web app is no longer accessible through the public internet and may only be accessed by machines within your Azure VNet.

 

 

 

It's vital to realize that putting your app behind a private endpoint limits its availability to the region where your VNet is located. As a result, your application is no longer available in various locations. If your app has a private endpoint enabled, a 403 status code is returned if the request comes from a public IP address. This behavior is applicable to both the production and staging environments. The private endpoint installed within your VNet is the sole way to access the app.

 

 

 

The static web app's default DNS resolution still persists and routes to a public IP address. Within your VNet, the private endpoint exposes two IP addresses: one for the production environment and one for any staging environments. To ensure that your client can reach the app, verify that it resolves the app's hostname to the right IP address of the private endpoint. This is necessary for the static web app's default hostname as well as any custom domains defined. This is the recommended method and is done automatically if you choose a private DNS zone when building the private endpoint.

 

 

 

If you're connected from on-premises or don't want to use a private DNS zone, manually configure the DNS records for your application so that requests are routed to the private endpoint's IP address. More information on private endpoint DNS resolution may be found on the Azure website.

 

 

 

Before we begin setting a private endpoint, you must have an Azure account with a current subscription. You can create an account for free. You'll also need an Azure VNet and an Azure Static Web Apps application running on the Standard hosting plan.

 

 

 

To create a private endpoint for your static web app:

 

 

 

1. Open your static web app in the Azure Portal.
    
   
2. 
   Select the Private Endpoints option from the side menu.
    
   How to add a private endpoint to a Azure static web app
    
    
    
   
3. 
   Select Add.
    
    
    
   
4. In the Name dialog box enter: myPrivateEndpoint
    
   
5. Select your subscription in the Subscription dialog box.
    
   
6. Select your virtual network in the virtual network dialog box.
    
   
7. Select your subnet in the subnet dialog box.
    
   
8. Leave the default of Yes for the integrate with private DNS zone selection.
   

 

 

 

Once you've configured your private endpoint, you can only access it from within your virtual network. To test, create a virtual computer within your virtual network and connect to your site. This ensures that your private endpoint is functioning properly and that your static web app is only accessible from within your virtual network.

 

 

 

A raccoon thief stealing unsecured website data

 

Continue reading...