How to Set Up Access Control Between Azure Static Web Apps and Azure App Service?

Question

I have deployed a FastAPI backend in Azure App Service and a frontend in Azure Static Web Apps. To enhance security, I want to introduce access control so that only specific clients (in this case, my frontend) can access my backend APIs. I attempted to configure this using Access Restrictions in Azure App Service. In the Source Settings, I see options for Virtual Network or IPv4. However, I’m unable to identify the IP address block or the Virtual Network for my Azure Static Web App. Some posts say Azure static app doesn’t post a static IP address.

My goal is to set up a rule that allows only my frontend to access the backend APIs while blocking other unauthorized requests. Currently I create access control rules in my backend code (FastAPI). I think it is not that good.

app = FastAPI(
    docs_url=None if os.getenv("ENV") == "production" else "/docs",
    redoc_url=None if os.getenv("ENV") == "production" else "/redoc"
)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://xxxx.x.azurestaticapps.net"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

ChatGPT recommends me to introduce Azure API Management. Is that feasible? What is the most effective method?

Answer 1

By integrating the App Service with a Virtual Network (VNet) and setting up private access, you can restrict access to backend APIs to trusted sources only.

To create a private connection between a static web app and an app service via a virtual network, you can follow the steps below :

Create VNet and Integrate App Service with a VNet by Enabling VNet integration for Azure App Service.

Create a Private Endpoint for the Static web app, with associating same stacic web app VNet and this ensures the backend APIs are only accessible via the VNet.

Restrict Azure Static Web App Access by Configuring your Static Web App to use a VNet with Virtual Network Integration in Premium or Standard tiers.

Refer to this link to configure a private endpoint in Azure Static Web Apps. Additionally, you can refer to this link to learn how to access Azure Web Apps through a VPN connection.

Use the private IP of the Static Web App to allow communication with the App Service.

Go to the Access Restrictions section of the App Service .

Add a rule to allow traffic only from the subnet where Web App is integrated. Web app Output:

To access the static web app URL, you must be within the same private endpoint VNet network range.

Output of Static web app with in vnet network range :

If accessed outside the network range, it returns a 403 Forbidden error as shown below: