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?

@jlkolalala refer to this doc to configure private endpoint in Azure Static Web Apps. — P Sampath
– P Sampath, Commented Dec 12, 2024 at 6:55
@jlkolalala Do you want to connect azure static web from app service via Vnet? — P Sampath
– P Sampath, Commented Dec 12, 2024 at 11:55
To securely connect an Azure App Service to an Azure Static Web App using a VNet, you have options like NAT gateways or Service Endpoints — P Sampath
– P Sampath, Commented Dec 12, 2024 at 11:58

P Sampath · Accepted Answer · 2024-12-13 07:51:38Z

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.

Vnet

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.

private end points

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 .

access restrictions

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

Web app out put

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 :

static Web app Output

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

Azure static web app

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related