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

Posted 2023-03-28

【中文标题】将文件从浏览器上传到 Azure Blob 存储，无需 SAS 密钥

【英文标题】：Upload file to Azure Blob Storage from browser without SAS key

【发布时间】：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/…

【参考方案1】：

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

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

【讨论】：

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