如何使用环境变量为浏览器实现 Microsoft Azure Blob 存储？

Question

我正在尝试实现一个连接到 Microsoft Azure 的 Web 应用程序，以便将文件上传到他们的云存储。我一直在关注的文档是在浏览器中使用 JavaScript v12 SDK 管理 blob。教程如下：

https://docs.microsoft.com/en-us/azure/storage/blobs/quickstart-blobs-javascript-browser

文档明确指出，要在网站上使用 Azure SDK 库，您必须使用捆绑器将代码转换为在浏览器中工作。建议的捆绑器是parcel-bundler

我已经很好地构建了项目，并且一切都按照教程大纲在浏览器中运行，但是在隐藏 API 密钥时遇到了问题。

解释使用 Node.js 上传 Azure blob 的替代教程建议使用环境变量：

https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-nodejs

我已经在我的浏览器教程中做到了这一点，但是，当 parcel 将项目捆绑在一起时，可以通过查看源文件来访问完整的 API 密钥，这表明它们是在 bundle 的构建过程中显示的。

看来我需要使用捆绑器，因为用于浏览器的函数在客户端 JavaScript 中不存在。

我该如何解决这个问题？

Answer 1

您不应在基于浏览器的应用程序中使用 API 密钥，因为这是一个主要的安全问题（任何用户都可以查看浏览器中的 JavaScript 文件并提取密钥）。

您应该做的是拥有一个您的应用程序可以调用的 API 端点，并且该 API 端点应该返回一个共享访问签名 (SAS) 令牌。然后，您应该在应用程序中使用此 SAS 令牌与 Azure 存储进行交互。