javascript - 从浏览器访问 Azure Key Vault 的 secret (node.js 和 Vue.js)

Question

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

因为我不希望将主 key 硬编码到我的 JavaScript 中，所以我将其作为 secret 放入 Azure Key Vault 中。现在，我无法访问它，因此无法运行我的 Azure 函数。

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

如果相关，我希望能够在测试时以及部署时从我的网站本地访问 key 保管库(我目前不知道在哪里) ，但我很可能会在 Azure 上部署我的网站)。另外，我不想编写服务器端代码，因为我正在编写 SPA

那么...我如何从 vue 网站(又名在浏览器中运行的 JavaScript)访问 key 保管库中的 secret ？

Answer 1

您想要实现的目标的主要障碍是缺乏 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 感兴趣我创建了这两种方法的演示。