Static-web-apps: Can I prevent API access from external source?

[justinyoo]

Hi, Team.

I've added an API endpoint that is accessible from the static web app instance. Now I can call the API endpoint like:

/api/hello

Now, I want to secure the API endpoint from outside. I only want to call the API from the static web app side. However, I can directly call the API like:

https://<my-static-web-app>.azurestaticapps.net/api/hello

It's not desirable because the static web app instance shouldn't include the function auth key - meaning the API should allow "anonymous" access.

How can I prevent direct external access to the API endpoint?

[miwebst]

So the "static web app" side here means that its your customer's browser making the request. There is no way for the function to differentiate the caller. What is the reason you are trying to lock down access to the api through your static web app domain?

[annaji-msft]

@justinyoo can't you just use the "function" authlevel instead of "anonymous". This should work. Am I missing something here?

[justinyoo]

@miwebst One of the reasons using the proxy API is to hide sensitive information like API key from the public access. Let's say that I have a static web app instance, https://snow-piercer-1234.azurestaticapps.net and its proxy API endpoint of /api/hello.

The static web app only calls the proxy API within the browser. It knows nothing about the external API details, which is good. But, WITHIN the proxy API function, it calls an external API like https://my-external-api.azurewebsites.net/api/lorem?authkey=xyz. In this case, the authkey of xyz comes from the configuration (environment variables), which is fine.

But the problem is that, if I directly send a request to https://snow-piercer-1234.azurestaticapps.net/api/hello via Postman, it's still possible. I don't know the auth key of the external API, but I can get the data through this proxy API endpoint, using Postman. I don't think this is the expected behaviour.

The proxy API endpoint should ONLY be open to the static web app, not to anything else; otherwise the proxy API endpoint will be abused.

---

As @anganti suggested, I can set the auth level of the proxy API endpoint from anonymous to function. Again, if I do this way, the function auth key MUST be exposed to the static web app instance, which SHOULD be avoided, and there's no difference between anonymous and function with the auth key being exposed.

[justinyoo]

If I put API Management between the proxy API and external API, it may solve my concern. But, is this the only way to figure out the issue?

[MarkXA]

If the information shouldn't be available to the public, you need to authenticate users via OAuth first (https://docs.microsoft.com/azure/static-web-apps/authentication-authorization) and then your API should validate that they're authorised (https://docs.microsoft.com/en-us/azure/static-web-apps/user-information).

[justinyoo]

@MarkXA Yeah, that's one way. But I have a different use case. The static web app itself is public facing, but want to keep the proxy API from being abused. As @miwebst mentioned, if it can't be done on the app instance itself, I should find another way outside the app.

[MarkXA]

Well it depends on your definition of "abused", but if for some reason you absolutely have to prevent any access to the API at all, and adding authentication won't prevent the abuse, then Static Web Apps isn't for you and you'll need to use a traditional web server. The whole point of a static app is that there is no web server, the files are just hosted on a CDN and all API access is performed by the client directly.

If by "abuse" you mean you're worried about a denial-of-wallet attack from somebody flooding the API with unauthenticated calls in the hope of landing you with a big bill then I'll leave it to the team to comment on what's in place to prevent that :)

[justinyoo]

@MarkXA Yeah, your second paragraph is what I asked originally. ASWA itself can't block the API access. I get that. My ask was different. It's more architectural issue.

Netlify is able to hide the function/proxy from the public visibility: https://docs.netlify.com/functions/configure-and-deploy/#configure-the-functions-folder

Though we process the files in the functions directory after running your build command, the directory is not visible over the web unless you place it in your site’s publish directory (not recommended).

Netlify uses AWS Lambda for their API proxy feature - meaning their API Gateway does something for it.

It means, our ASWA also can prevent public access to the proxy API part, by implementing some sort of blocking logic.

[miwebst]

Ah I see, I think there might be a small disconnect here. @justinyoo the link you posted above is essentially saying if you use Lambda's then the Lambda source code is not accessible unless you include it in your sites published content.

ASWA works similarly. We build your Azure Functions separately from your static content and as a result then only way for your Function source code to become public is if you include it in the publish directory. No one can ever access the function key's or app settings that you configure for your ASWA functions, these are not exposed to the client.

[justinyoo]

Oops. That's what it meant.

Sooo, it's impossible to block random access from public to the proxy API, like everyone says, because it's not what ASWA does for?

[miwebst]

So you can't restrict your api calls to just the browser running your application. This is because there isnt really anything unique about your app running in the browser compared to a different http client. You can restrict access by using Roles, but this will restrict the api to a subset of users which may not be your desired solution.