Azure API Management - How to secure Subscription key

Question

Technical stack

• API deployed in WebApp
• API Management deployed and WebApp is configured as Web service URL.
• UI developed in Angular application which calls API Management endpoints to display data on UI.
• IP Authentication is implemented to make sure only allowed users has access to UI & API
• Subscription is enabled at Product level and key is shared with client for API call
• Separate product is created for UI and subscription key is used in UI to call API and display data

Now in this case, subscription key will be visible thru Browser -> Inspect -> Network tab

We want to make sure that user can't use UI key to make API call Using Proxy will hide the key but now anyone can call proxy url to get data.

How to make it secure?

Cud

If you don't want to expose the subscription key from the client-side, avoid to call that API from there. I suggest to you to add a new ajax method in your server-side that will call that API and then return the response; in that way from client-side can't see the API call at all. If you want, you can add a policy limit from the APIM to restrict the caller IP of your API or Product. – Claritaclarity

Thanks nmbrphi for your reply. So here you are talking about proxy, still my purpose is not resolved here. In this case, now anybody can call API and get data as now key is now encapsulated in ajax api call. I want to identify somehow that call is from UI or from anywhere else. user_agent, origin, x-referer all can be manipulated during API call. – Cud

Maybe with cross-domain policies? You can set the urls of the allowed ordigins for the API product for your UI project. learn.microsoft.com/en-us/azure/api-management/… – Claritaclarity

Thank nmbrphi for your reply. CORS policy already implemented, problem is with UI API + UI Key can be call directly from another API, how to secure is a question – Cud

You can't. If you require the token for authentication, it is going to be visible. Even secure sites can't stop a username/password from being visible to the user through the browser tools. You have to either rethink your authentication or live with your solution. – Urticaria

@garethb, token has a expiry time, but here in subscription key we don't have. Ideally it should not be available for angular application because it will be visible. I am thinking to call this api from server to server call using webclient, but again it would be complex – Encephalography

@ShobhitWalia it's not too complex if you have server side code (as little as a few lines of code in a new endpoint). We do this all the time to hide keys. Just have your server create the request and call the api with the key and your angular application call your server endpoint. The client will not be able to see the api key this way. – Urticaria

Answer 1

As mentioned by nmbrphi, garethb, we can't control what end user see in browser network tab.

And as we do not have user authentication available in system and only have IP authentication, can't control usage of UI key directly from API.

To make sure we have more secured UI call, we have implemented custom logic which can be used for any javascript application

Reference http://billpatrianakos.me/blog/2013/09/12/securing-api-keys-in-a-client-side-javascript-app/

This helped me to at least distinguish UI calling API and API directly called from other application/tools like postman.

Thanks all for your help.

Cud

Answer 2

Did you find any solution ? I used nginx as proxy server and kept subscription key there as proxy_set_header subscription-key abc-def when calling microservice. This way subscription key wont be exposed to UI and will be forwarded to API Management Service via nginx.

Diandrous

Just to get clarification, with Angular as a JavaScript framework, how nginx will come into picture during APIM call ? – Cud

Only with angular we can't build a secure application, as mentioned subscription key will be exposed in browser. We always need a middleman like nginx or other server app to handle security. – Diandrous

So Angular will call nginx server which in turn will send key to APIM, so still my APIM call is not secured – Cud

Answer 3

Store your keys on Azure Key vault and access from your front end application, https://medium.com/@ayanfecrown/azure-key-vault-node-js-step-by-step-tutorial-af131a78e220

Rotator

Thanks Mohamed for your reply. So front end application will get key for Azure Key valut, and will then call APIM which accept subscription key in header. So still user can view key in network tab. I want to protect any unauthorised call to APIM using UI key. – Cud