如何允许在React应用程序中执行Azure Blob存储上传而不违反内容安全策略

Question

我有一个Azure存储帐户和一个容器，我想从我的React应用程序上传我的文件。使用Azure函数，我生成SAS密钥并将其返回到我的React应用程序，以便能够上传文件。SAS密钥具有所需的适当权限("cw"(。我的存储帐户上的CORS规则已设置为接受所有内容。

这是我用来执行上传的功能，我从微软的教训中学到了这一点：

import { BlockBlobClient } from '@azure/storage-blob';
import { IFile } from './interfaces';
export async function uploadFileToAzure(
file: IFile,
uploadUrl: string,
sasKey: string,
) {
const login = `${uploadUrl}/${file.name}?${sasKey}`;
const blockClient = new BlockBlobClient(login);
await blockClient.uploadData(file.file);
}

uploadUrl是存储帐户的URL
file是一个保存文件信息的接口，如名称和实际文件本身
sasKey是我的Azure功能返回给我的SAS密钥。

当这个运行时，我得到这个错误：

拒绝连接到'https://storageaccount.blob.core.windows.net/container/file-name.extension?sasKey'，因为它违反了以下内容安全策略指令："；默认src"self"；。请注意，未显式设置"connect-src"，因此使用"default-src"作为回退。

我在处理CSP的index.html文件中添加了一个新的meta标记。我添加这个是为了允许现在的一切，但即使在那时，这似乎也不够：

<meta http-equiv="Content-Security-Policy" 
content="default-src *  data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic'; 
script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; 
connect-src * data: blob: 'unsafe-inline';
img-src * data: blob: 'unsafe-inline'; 
frame-src * data: blob: ; 
style-src * data: blob: 'unsafe-inline';
font-src * data: blob: 'unsafe-inline';
frame-ancestors * data: blob: 'unsafe-inline';">

我缺少什么CSP规则或设置不正确？为什么它告诉我connect-src没有明确设置？为什么它违反了default-src 'self'，而我的CSP中从未说明过这一点？我的上传过程正确吗？我有什么想错了吗？

Answer 1

最可能的解释是定义了两个或多个策略，并且所有内容都需要通过所有存在的策略。除了您在元标签中的策略之外，可能在响应标头中定义了一个(或多个(；默认src"self"；。你需要找到这个策略是如何设置的，并禁用或修改它。它可以通过框架、web服务器、负载均衡器等进行设置。

Answer 2

我终于找到了答案。问题是前端被捆绑并使用express进行静态服务。express服务器使用helmet作为中间件。helmet正在创建自己的内容安全策略。我根据自己的需要编辑了政策，结果不出所料！