Static Web App sending HTTP request to Function App without exposing key

[half thistle]

Hello,

I have an Azure Static Web App which sends an HTTP POST request to an HTTP function app. I am using fetch to send the request to the url using the function url that is provided by Azure. However, I do not want to expose my function key, so I am looking for a secure way to do this.

I tried storing the function key as an environment variable in the SWA's configuration and accessing it in the JavaScript file using process.env.AZURE_FUNCTION_KEY;, but it did not work. I would really appreciate if someone could let me know if I am approaching this incorrectly or if there is another solution. Thank you c:

How can I have my Static Web App send an HTTP request to my Function App without exposing the functi

Static Web App sending HTTP request to Function App without exposing key

[bright dirge]

you're deploying you're app using github actions i presume ?

[sly stream]

My suggestion would be to store any secrets in an Azure key vault and then create an app setting in your SWA resource to be a key vault reference. See docs here: https://learn.microsoft.com/en-us/azure/static-web-apps/key-vault-secrets

[bright dirge]

This or you can create the env variables on you're github repo as secrets and declare them in you're pipeline yml file in the env section

Because i think that env variables used for frontend build are not exposed to the web ( for security measure) and can't be used directly ( I'm not sure to comfirm this info )

(https://learn.microsoft.com/en-us/azure/static-web-apps/build-configuration?tabs=adt&pivots=github-actions#environment-variables)

[half thistle]

Thank you

[half thistle]

Yes I am deploying using Github Actions

I will try this soon and reach back out

I am sure that I am not the first person to have this issue, though, so I am wondering if I am approaching this the wrong way.

Because the HTTP function has access to a privileged certificate and thus I can't risk to expose the key.