将文件从浏览器上传到 Azure Blob 存储，无需 SAS 密钥答案

【问题标题】：Upload file to Azure Blob Storage from browser without SAS key将文件从浏览器上传到 Azure Blob 存储，无需 SAS 密钥
【发布时间】：2021-10-20 23:49:15
【问题描述】：

我知道可以上传到 Azure Blob 存储 using SAS keys。

这在反应中非常有效

import { BlobServiceClient } from "@azure/storage-blob";
const account = env.REACT_APP_BLOB_ACCOUNT_NAME;
const sas = env.REACT_APP_BLOB_SAS;
const blobServiceClient = new BlobServiceClient(`https://${account}.blob.core.windows.net${sas}`
const containerClient = blobServiceClient.getContainerClient(container);
const blockBlobClient = containerClient.getBlockBlobClient(destination);
blockBlobClient.upload(data, data.size)

据我了解，如果允许任何用户在登录后上传内容，则使用 SAS 密钥可能会导致安全漏洞。SAS 不能依赖于用户，如果 SAS 密钥被嗅探，它可以打开应用程序中的安全漏洞。

在亚马逊，可以通过 Cognito 验证用户身份和访问权限，然后直接上传到 S3。如何使用 Azure Blob 存储和 Azure AD 实现这一目标？

【问题讨论】：

这是您要找的吗？ AAD 身份验证到存储 docs.microsoft.com/en-us/azure/storage/blobs/…
@silent，是的。我的问题是如何使用浏览器（客户端）来做到这一点。所有指南和示例都使用 SAS 或连接字符串。我没有找到任何支持从浏览器（Web 应用程序，而不是 azure 门户）上传的文档
如果您有服务器端组件，则该组件可以使用 AAD 对存储进行身份验证。如果您想直接从浏览器上传，您需要先将 AAD 登录集成到您的应用中，以便为用户获取令牌，然后您可以使用该令牌与存储进行交互
docs.microsoft.com/en-us/azure/active-directory/develop/…

标签： azure azure-active-directory azure-web-app-service azure-blob-storage

【解决方案1】：

您可以参考 this 文档为您的应用程序设置 AAD，然后查看 THIS 文档，该文档展示了如何使用这些凭据设置您的 BlobServiceClient。 HERE 是来自 Github 的示例。

另一种方法是使用其余 API。您可以先在 Azure Active Directory 上进行身份验证 LINK 以获取令牌。在Putblob rest api 调用中将此作为不记名令牌传递。

【讨论】：

经过大量研究，Azure 似乎禁用了身份验证并从 JavaScript 客户端上传到 Blob 存储 - 除非您使用 SAS 密钥。我发现最好的方法是使用所有密钥将数据发送到后端服务器，对请求进行身份验证，然后将其上传到 blob 存储。鉴于此答案与我发现的所有内容都非常吻合，我会接受它作为问题的答案。