How to automate fetching ocp-apim-subscription-key from Azure API Management (APIM) and store it in Angular typescript source code?

Siegfried Heintze 1,861

Background:

I'm trying to automate the deployment of my Angular Azure Static Web, APIM & Function App with Github workflows and Bicep.

I learned here (where-to-find-my-ocp-apim-subscription-key-in-windows-azure) that I can fetch my ocp-apim-subscription-key from my APIM and use this ocp-apim-subscription-key to call my function app.

I assume that his is a very good idea because the alternative is to publish the Azure App Function key in the javascript source code which would bypass APIM.

I'm wondering if it is safe to store my in typescript/javascript source code as I queried here: how-to-use-visual-studio-to-deploy-azure-api-manag.html. Until I get a response, I will assume that it safe to store ocp-apim-subscription-key (but not azure function keys) in my browser resident source code.

Questions:

How do I automate fetching this ocp-apim-subscription-key from APIM? Bicep? Github Workflow?
How do I automate storing this in my angular typescript (javascript) source code? Bicep? Github workflow?

I have posted a related question here: how-to-automate-deployment-of-angular-azure-static.html.

2 answers

Siegfried Heintze 1,861 Reputation points

2022-11-13T01:02:54.047+00:00

Thank you MikeUrnum & MuthuKumaranMurugaachari.

I just discovered that the underlying premise of my question was false. Having a ocp-apim-subscription-key to guard my APIM API is an option, not a requirement.

So obviously you only request a subscription & subscription key if you don't want to make it available to the general public so there is no need to store the ocp-apim-subscription-key in the source code. Instead, just to click the check box for a subscription...

I apologize for the confusion.

Now Mike does raise an interesting point!

Let's assume bing.com is implemented with a static web site with AJAX calls to azure function apps.

Such a site would have to abandon the ocp-apim-subscription-key feature if you wanted everyone to use it!

Could APIM provide sufficient protection to make such an implementation feasible (safe)?

I think this should be the subject of a different post and I'm going to mark this post answered.

Siegfried
Please sign in to rate this answer.

2 people found this answer helpful.
MuthuKumaranMurugaachari-MSFT 22,141 Reputation points

2022-11-14T14:32:22.78+00:00

@Siegfried Heintze Sure, you are welcome. that's correct. You can disable Requires Subscription for product or API, and it will be considered as Open Product or Open API. Please review How API Management handles requests with or without subscription keys and caution about security threats.

Regarding other question, it would be a good idea to start a new thread for a discussion. Thanks again for sharing it.
Sign in to comment
MuthuKumaranMurugaachari-MSFT 22,141 Reputation points

2022-11-01T15:32:56+00:00
@Siegfried Heintze Thank you for reaching out to Microsoft Q&A. As described in other thread, you can set up GitHub actions and use CLI, PowerShell or REST API commands for automating the tasks/actions.

To Fetch ocp-apim-subscription-key, use PowerShell command Get-AzApiManagementSubscriptionKey.

We don't have a guideline on how client apps handle subscription keys. However, I think it is not good idea to expose or save it in source code. You can save it in Key Vault using Set-AzKeyVaultSecret command (docs) and retrieve it in your client app. Refer docs which describes @azure/keyvault-secrets package and samples to use in JavaScript/TypeScript application for handling secrets. For end-to-end JavaScript samples, check out https://github.com/Azure-Samples/js-e2e.

I hope these answers help with your questions and feel free to add a comment if you have any other questions. We would be happy to assist you. Please 'Accept as answer' and ‘Upvote’ if it helped so that it can help others in the community.
Please sign in to rate this answer.
Siegfried Heintze 1,861 Reputation points

2022-11-01T19:37:55.753+00:00

We don't have a guideline on how client apps handle subscription keys. However, I think it is not good idea to expose or save it in source code. You can save it in Key Vault using Set-AzKeyVaultSecret command (docs) and retrieve it in your client app. Refer docs which describes @azure/keyvault-secrets package and samples to use in JavaScript/TypeScript application for handling secrets. For end-to-end JavaScript samples, check out https://github.com/Azure-Samples/js-e2e.

Please correct me if I'm wrong but those javascript/typescript samples for server resident code, not browser resident code.

Is it possible to have browser resident code (on a public website) make AJAX calls to my azure app function via APIM? If so, please explain how my browser resident javascript code is going to access the keyvault to fetch the ocp-apim-subscription-key?

Typically, the approach is to fetch the secret (such as a connection string or password) from the key vault during the deployment inside of a bicep script that is running inside a github workflow and store it in an app setting for a web site where the web server/webapp can fetch it as an environment variable. That works for server resident code. I was thinking I would use bicep to fetch the ocp-apim-subscription-key (how do I that?) and store it in the browser resident file (source code file? How do I do that?) during the github deployment workflow execution. OK, if I use powershell to fetch it in the github workflow, where (and how) do I store it so my browser resident javascript code can call my azure function?

MuthuKumaranMurugaachari-MSFT 22,141 Reputation points

2022-11-02T20:52:14.493+00:00

@Siegfried Heintze Yes you are right, @azure/keyvault-secrets package has a limitation described here and unfortunately cannot run in browser. You should be able to call APIM (then calling Function app) from client-side JavaScript with subscription key.

Regarding how to store subscription key in client-side app, @Mike Urnun any suggestions?

Mike Urnun 9,651 Reputation points Microsoft Employee

2022-11-03T06:38:02.233+00:00

Hello @Siegfried Heintze Regarding the below:

I was thinking I would use bicep to fetch the ocp-apim-subscription-key (how do I that?) and store it in the browser resident file (source code file? How do I do that?) during the github deployment workflow execution

Could you expand on the main objective for doing this automation? If you're looking to improve security of the subscription key & abstract it out to KeyVault or get Bicep to fetch it directly from APIM dynamically during build time to then pass it into transpilation time of your Angular code, subscription key will still be accessible via browsers when your front-end app is serving requests. If there are other compelling reasons anyway, separation of concerns is something to think about too. In your use case, because the subscription key is something that'll be part of your Angular stack, it'll have to reside in its configuration file according to its best practices, and if you're using git for version control, having something like Github workflow through Bicep to make edits to your application code would potentially cause more problems.

If security between Angular->APIM->Function App call chain is what you're really after, I recommend implementing token based authentication: https://stackoverflow.com/questions/56697806/calling-azure-api-management-from-ui

Mike Urnun 9,651 Reputation points Microsoft Employee

2022-11-03T06:56:18.05+00:00

On the flip side, if you're looking to get your Angular app to interact with APIM, and fetch sub IDs dynamically based on business logic, you might explore the client-side SDK (in JS/Typescript) for APIM: https://www.npmjs.com/package/@azure/arm-apimanagement

Siegfried Heintze 1,861 Reputation points

2022-11-03T16:06:29.087+00:00

Short answer: Since this web site will basically just query a database and display some tables and graphs, I figured AAD/B2C authorization & authentication would be overkill for version 1. I've been studying ms-identity-dotnet-webapi-azurefunctions and since it was not clear if this code was APIM & Angular/AJAX friendly, I was hoping for a simpler alternative for version 1 of the web site.

Long answer: Please help me understand this APIM/ocp-apim-subscription-key. It is clearly not safe to broadcast the azure function key to the public internet and I assumed it the purpose of APIM/ocp-apim-subscription-key is to provide a safe alternative to broadcasting the azure function key to the internet and securely hide the function key in the key vault.

Part of the purpose of this posting was to confirm that it was safe to broadcast this ocp-apim-subscription-key... If it is not safe, does this ocp-apim-subscription-key have some other purpose or benefit?

Is AAD the official Microsoft recommendation for Angular/AJAX sites using a function app even though we don't need authentication or authorization (but still want to use APIM to secure our function app)?

Siegfried Heintze 1,861 Reputation points

2022-11-03T17:57:39.63+00:00

Let's pretend I have a malicious user that extracts the ocp-apim-subscription-key from my angular code... What are they going to do with it? Call my function app via APIM? what is wrong with that? That is what they do anyway with my angular web page... And the whole point of APIM throttling is to prevent them from abusing my function app... Correct?

Ohh. that looks like a good link on javascript and APIM.

Siegfried Heintze 1,861 Reputation points

2022-11-03T18:01:14.997+00:00

Are you familiar with this example: ms-identity-dotnet-webapi-azurefunctions? Could I expect it to work other Angular front end examples such as Angular single-page application using MSAL Angular to sign-in users against Azure AD B2C & APIM?

Mike Urnun 9,651 Reputation points Microsoft Employee

2022-11-04T01:13:50.087+00:00

Hey @Siegfried Heintze

What are they going to do with it? Call my function app via APIM? what is wrong with that? That is what they do anyway with my angular web page..

Ideally, your front-end app shouldn't expose the calls to APIM with a Subscription ID without signing in end-users. With AAD integration, your end users would be part of Group/Product entities which are then tied to a specific subscription and you'd control throttling, etc.

And the whole point of APIM throttling is to prevent them from abusing my function app

Correct. Just by placing APIM in front of your Function App API and making it such that only your APIM can call your Function App API, you're protecting the Function App. However, if you then make your subscription ID accessible to everyone who visits your front-end app without signing them in, it defeats the purpose of securing Function App.
Sign in to comment