从浏览器访问 Azure Key Vault 的机密(node.js 和 Vue.js)

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

我有一个 Vue 单页应用程序(尚未部署),它调用 Azure 函数来获取一些数据。 Azure 函数具有管理员级别的安全性,因此我需要主密钥才能调用它。

因为我不想将主密钥硬编码到我的 JavaScript 中,所以我将它作为秘密放入了 Azure Key Vault。现在,我无法访问它,因此我可以 运行 我的 Azure 函数。

我在网上找到的所有教程都没有帮助。我什至发现了一个 npm 模块 (https://www.npmjs.com/package/@azure/keyvault-secrets),它允许人们从密钥库访问秘密——但是在浏览器中使用这个模块(我的代码将 运行)被认为是不安全的。

如果相关,我希望能够在测试时从我的网站 本地 访问密钥保管库,但在我部署它时也是如此(我不我现在知道在哪里,但我很可能会在 Azure 上部署我的网站)。另外,我不想编写服务器端代码,因为我正在编写 SPA

那么...我如何从 vue 网站(又名 JavaScript,即浏览器中的 运行)访问我的密钥保管库中的秘密?

//评论后编辑

如果您没有服务器端代码,您基本上无法从 KeyVault 中获取。因此,仅使用 Azure AD to authorize against your Function directly 并绕过 KeyVault 会更容易。

您试图实现的主要障碍是缺乏 CORS 服务级别的支持。因为 Azure Key Vault 不提供 CORS 配置,当浏览器中 运行 时,您对 Key Vault 的请求将失败。

但您确实有几个选择:

  1. 一个服务器端组件,可以充当中介并允许您为应用程序配置 CORS 策略。由于 CORS 是浏览器限制,服务器端应用程序无需配置 CORS 即可与 Azure Key Vault 通信。
  2. 您可以使用 Azure API Management 作为客户端应用程序和 Azure Key Vault 之间的桥梁。因为 Azure API 管理支持 CORS,所以它将能够与 Azure Key Vault 通信。

您可能对 this documentation and sample 我创建的演示这两种方法感兴趣。