I have a ReactJS webapp and a backend webapp built with ExpressJS. The are both hosted on Azure as different App services. Right now everyone can access any route for the Express app; every route returns some json data from Conteful API.

I'm trying to set a restriction in Azure for the Express app so only my React app can make requests to it.

I have found that you could do this by going to the Express app under Networking, there I have added a rule, and I have whitelisted the ip for the React app but I get a 403 now in my React app and it doesn't get any data back from Express.

Is there something more that I have to do?

I also discovered that my Express app and React app have the same Virtual ip addresses and also the same outbound ip addresses.

Does anyone know how I could fix this issue within Azure?

CodePudding user response：

It's difficult to apply the security you want using ip addresses, because the same ip addresses may be shared by many azure app services (yours and others too), and may change - e.g. if you upgrade to a different SKU.

Instead, I'd recommend putting your app services in an Azure Virtual Network and using Access Restrictions to control access to the ExpressJS app service.

To be specific, I'd recommend:

1. creating an azure vnet with two subnets:
   • one for the back-end
   • one for the front-end, including a "Microsoft.Web" Service Endpoint
2. put the ExpressJS app service in the virtual network, in the back-end subnet
3. put the ReactJS app service in the front-end subnet
4. define Access Restrictions for the ExpressJS app service, allow traffic from the front-end subnet and disallowing all other incoming traffic
5. do not define any Access Restrictions for the ReactJS app service

End result:

1. internet traffic can reach the ReactJS app service, but not the ExpressJS app service.
2. Traffic from the ReactJS app service can reach the ExpressJS app service