CODEWITHSUNDEEP
javascriptazureazure-keyvault
jack.py
jack.py

Reputation: 442

Access secret from Azure Key Vault from browser (node.js with Vue.js)

I have a Vue single-page application (not deployed as of yet), that calls an Azure function to get some data. The Azure function is has admin level security, and so I need the master key to call it.

Because I don't want the master key hardcoded into my JavaScript, I put it into an Azure Key Vault as a secret. Now, I'm having trouble accessing it, so that I can run my Azure function.

Every tutorial I've found online doesn't help. I even found an npm module (https://www.npmjs.com/package/@azure/keyvault-secrets) that allows one to access secrets from the key vault - however using this module in the browser (where my code will run) is deemed unsafe.

If it's relevant, I'd like to be able to access the key vault from my website locally when testing it, but also when I deploy it (I don't know where at the moment, but I'll most likely deploy my website on Azure). Also, I'd prefer not having to write server-side code, as I'm writing an SPA

So... how can I access a secret in my key vault from a vue website (aka JavaScript that's run in the browser)?

Upvotes: 0

Views: 2277

Answers (2)

mlnyc
mlnyc

Reputation: 2716

The main blocker to what you are trying to achieve is lack of CORS support at the service level. Because Azure Key Vault does not provide CORS configuration your requests to Key Vault will fail when run in the browser.

But you do have a few options:

  1. A server-side component which can act as an intermediary and allows you to configure CORS policies for your application. Because CORS is a browser restriction, a server-side application will be able to communicate with Azure Key Vault without configuring CORS.
  2. You can use Azure API Management to act as a bridge between your client-side application and Azure Key Vault. Because Azure API Management supports CORS it will be able to communicate with Azure Key Vault.

You might be interested in this documentation and sample I created demonstrating the two approaches.

Upvotes: 1

silent
silent

Reputation: 16138

//Edited after comments

If you dont have server-side code, you basically cannot fetch from KeyVault. As such it would be easier to just use Azure AD to authorize against your Function directly and circumvent KeyVault.

Upvotes: 1

Related Questions