How to set IP Filter Policy in Azure API Management Service for an Azure Static Web App

Ziggy Zulueta 490 MVP

I have an Azure API created via Azure API Management Service that I want to restrict its access to just one Azure Static Web App. What I did was to do an nslookup on the Azure Static Web App in the console to get the IP address and setup an IP Filter in the Inbound Processing setting of Azure API. However it does not work. Here is the nslookup blocking out my real https website address:

nslookup https://xxxx-xxx-xxx.3.azurestaticapps.net
Server:  waws-prod-hk1-c0bded75.sip.p.azurewebsites.windows.net
Address:  13.75.66.141
Aliases:  https://xxxx-xxx-xxx.3.azurestaticapps.net
          azurestaticapps3.trafficmanager.net
          msha-slice-3-hk1-1.msha-slice-3-hk1-1-ase.p.azurewebsites.net

I can access my api thru my website but after I put the below Filter , my website can no longer access the api.

        <ip-filter action="allow">
            <address>13.75.66.141</address>
        </ip-filter>

So How do I fix this? I want ONLY my Azure Static Web App to access my API in Azure API Management

3 answers

Sedat SALMAN 13,345 Reputation points

2023-04-09T17:34:09.6566667+00:00
Azure Static Web Apps use a content delivery network (CDN) to cache and serve content, so the IP address of your Static Web App is not fixed and can change. Using an IP filter for your Azure API Management Service is not a viable solution in this case. Instead, you can implement an authentication mechanism to secure your API and allow only your Azure Static Web App to access it. One common approach is to use API keys for authentication. API Management Service instance > Subscriptions > API Management > Primary key > In your Azure Static Web App, add the subscription key to your API requests. You can include it in the request header as follows

fetch('https://your-api-management-instance.azure-api.net/your-api-endpoint', { headers: { 'Ocp-Apim-Subscription-Key': 'your-primary-key' } })
Please sign in to rate this answer.
Ziggy Zulueta 490 Reputation points MVP

2023-04-10T02:08:44.09+00:00

@Sedat SALMAN Thank you for the answer. I am implementing this solution already. In fact, I have an additional feature of having the Ocp-Apim-Subscription-Key set in my Azure Static Web Apps Configuration vs hardcording it in HTML. However the main issue here is that this subscription key can be seen by POSTMAN by any developer who takes the time to read the code. In addition, POSTMAN can also access the API eventually by getting the API and using that subscription key. Hence this is why I have raised this question. How to stop POSTMAN from accessing the Azure API?

Sedat SALMAN 13,345 Reputation points

2023-04-11T07:27:47.08+00:00

To prevent unauthorized access to your API (from tools like Postman or any other client) beyond using just the Ocp-Apim-Subscription-Key, you can implement additional security measures such as:

CORS (Cross-Origin Resource Sharing) policy: Configure CORS in your Azure API Management Service to allow requests only from your Azure Static Web App's domain. This way, even if someone has the subscription key, they can't access the API from an unauthorized domain.

Use OAuth2 or OpenID Connect: Implement a more secure authentication mechanism like OAuth2 or OpenID Connect to protect your API. This way, the client (your Azure Static Web App) will have to obtain a token from an identity provider (such as Azure Active Directory) and use that token to access your API. Unauthorized clients won't be able to get a valid token.

Here some links to help you https://learn.microsoft.com/en-us/azure/api-management/api-management-howto-protect-backend-with-aad https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization

Ziggy Zulueta 490 Reputation points MVP

2023-04-11T08:14:34.2566667+00:00

@Sedat SALMAN Have you tried securing your API via CORS? I did..it does restrict only my website by placing the website address there.. issue is POSTMAN still pushes thru because it does not use a web browser. In addition, using Azure OAuth2 isn't acceptable to my client as the website that will access the API is a consumer website

Sedat SALMAN 13,345 Reputation points

2023-04-14T06:08:06.1433333+00:00

You're right that CORS alone won't prevent access from tools like Postman, as they don't rely on a browser environment. In this case, you can use a combination of security measures to further restrict access to your API. And as you mentioned OAuth2 or OpenID Connect is not an option In this case, to add an extra layer the following can be an option. You can use a custom header: In your Azure Static Web App, add a custom header to your API requests, e.g., 'X-Custom-Header': 'your-custom-value'. In your Azure API Management, create a policy to validate the custom header and its value. This will add an extra layer of security, but keep in mind that custom headers can also be intercepted and used by unauthorized clients. Or You can use a Web Application Firewall (WAF) Configure a WAF in front of your API Management service to protect it from common web vulnerabilities and attacks. This can help to detect and block unauthorized access attempts.
Sign in to comment
MuthuKumaranMurugaachari-MSFT 22,276 Reputation points

2023-04-10T17:26:12.8033333+00:00

Ziggy Zulueta Thanks for posting your question in Microsoft Q&A. Based on your description, you are looking to restrict APIM to accept requests only from Azure Static Web Apps. As discussed above, it is not possible to restrict via IP address.

I have discussed with our static web apps product team, and the current solution is to use bring your own API instead of managed version and then integrate with Azure API Management. Once you integrate it, validate-jwt policy is added to the product to allow only requests that contain a valid access token generated from the linked static web app. We have updated this note in https://github.com/Azure/static-web-apps/issues/75. Here are the doc references: https://learn.microsoft.com/en-us/azure/static-web-apps/apis-overview#api-options and API support in Azure Static Web Apps with Azure API Management to perform the integration. Note, the feature is currently in preview and bring your own APIs is only available in standard plan.

I hope this helps with your question and let me know if you have any other.

If you found the answer to your question helpful, please take a moment to mark it as "Yes" for others to benefit from your experience. Or simply add a comment tagging me and would be happy to answer your questions.
Please sign in to rate this answer.
Ziggy Zulueta 490 Reputation points MVP

2023-04-13T17:30:35.4366667+00:00

So I tried to Integrate my SWA with an APIM by going thru the SWA-APIs setting as shown:

And I then added the API to the product:

I then created a simple website to access the API... BUT I am getting a 401 (Access Denied) Error

<script> function init(){ url = 'https://xxxx-apim.azure-api.net'; const request = new Request(url, { method: 'GET', headers: { 'Accept': '*/*', 'Content-Type': 'application/json', } }) fetch(request) .then(res => { if (!res.ok) { throw new Error('Network response was not ok'); } return res.json(); }) .then(res => { console.log(res); }) .catch(error => { console.error('There was a problem with the Initialization:', error); }); } </script>

MuthuKumaranMurugaachari-MSFT 22,276 Reputation points

2023-04-13T18:13:17.52+00:00

Ziggy Zulueta you are directly trying to access APIM, and it would fail without subscription key, and access token. I think you are looking to access SWA API and if so, try https://<test>.azurestaticapps.net/api/ (SWA URL/api) in your application. Feel free to reach out if you have any other questions.

Ziggy Zulueta 490 Reputation points MVP

2023-04-14T09:54:50.72+00:00

Are you saying I should also pass also the Subscription key and access token? In which case, those values can be seen by Postman and the API can be accessible outside.. Also if I use https://<test>.azurestaticapps.net/api/ similar to the code before, how will I know which Api i would use if I assign more than one API in the product?

function init(){ url = 'https://xxxx-xxx-xxxx.3.azurestaticapps.net/api/'; const request = new Request(url, { method: 'GET', headers: { 'Accept': '*/*', 'Content-Type': 'application/json' } }) fetch(request) .then(res => { if (!res.ok) { throw new Error('Network response was not ok'); } return res.json(); }) .then(res => { console.log(res); }) .catch(error => { console.error('There was a problem with the Initialization:', error); }); }

how to determine which api to use in https://<test>.azurestaticapps.net/api/??

MuthuKumaranMurugaachari-MSFT 22,276 Reputation points

2023-04-14T13:16:22.1733333+00:00

Ziggy Zulueta Yes correct when accessing APIM, you would need access token as well as subscription key. These are all Rest API calls, and these details are passed via headers and body in HTTP requests and APIM as server side can validate those credentials but cannot restrict specific client such as Postman. When you have multiple APIs, you need to specify API/Operation template like below:
https://<test>.azurestaticapps.net/api/<api1>/<operation1> https://<test>.azurestaticapps.net/api/<api2>/<operation2> If you still have any questions, send an email to azcommunity@microsoft.com referencing this thread and subject as "Attn: Muthu". I can assist you offline.

Ziggy Zulueta 490 Reputation points MVP

2023-04-15T10:44:27.0133333+00:00

ok two things:

How do i get the access token? Where is this set?

So there is really no way to secure an API from Postman??? This is actually my main concern from the other ticket as well. The only way I see now is to use limit rate to avoid abuse..but protection from Postman via Subscription key, JWT token or whatever doesnt work.
I thought I can restrict it via an IP address - which is not possible.. every other "solution" just changes the "parameters" but Postman can still access manually.

MuthuKumaranMurugaachari-MSFT 22,276 Reputation points

2023-04-17T20:03:01.6833333+00:00

As mentioned in other thread, when accessing SWA API, it (static web app) will generate an access token for accessing APIM. To answer your second question, it is not possible to restrict the requests from specific clients such as Postman (https://stackoverflow.com/questions/75956476/azure-api-management-postman-can-still-access-my-api-how-to-restrict-postman). We may be able to suggest alternative solutions based on your implementation concerns and am happy to answer if you can reach offline (send email to azcommunity@microsoft.com).
Sign in to comment
RobertLynch-8642 0 Reputation points

2024-01-26T17:35:07.9633333+00:00
First Pinging the server or doing a tracert or nslookup will NOT get you the IP address of your service.
You need to find the "external IP address" of the service.. what you are seeing is probably just a load balancer. (incoming calls).
To find your IP address (of the Management API) go to the Monitoring -> analytics section. Click on the Requests tab and scroll to the bottom (assuming you just tried it) the Response Code the the NON authorized IP will be a 403. Add that to your filter. (example below)

Then the IP filter should look something like this. (replace the xxx with your IP address once you find it.

<policies> <inbound> <base /> <ip-filter action="allow"> <address-range from="xxx.xx.xxx.xxx" to="xxx.xx.xx.xxx" /> </ip-filter></inbound>
Please sign in to rate this answer.
RobertLynch-8642 0 Reputation points

2024-01-26T17:40:45.39+00:00

example of log (analytics)
Sign in to comment

Share via

How to set IP Filter Policy in Azure API Management Service for an Azure Static Web App

3 answers