Problem #

我通过ASP.NET WebForms后端生成的SAS URL，直接从浏览器向Azure Blob Storage上传文件，逻辑上上传流程是可行的，但浏览器总会抛出以下错误：

TypeError: Failed to fetch
Refused to connect because it violates the document's Content Security Policy

控制台错误详情：

Connecting to 'https://<storage-account>.blob.core.windows.net/...'
violates the following Content Security Policy directive:
"default-src 'self' https://apps.itl.co.tz/broker/".
Note that 'connect-src' was not explicitly set.

Environment #

• ASP.NET WebForms (.NET Framework)
• JavaScript fetch() API
• Azure Blob Storage (BlockBlob)
• SAS token 上传方式
• IIS托管应用
• 浏览器：Chrome / Edge

Backend (SAS生成代码) #

<System.Web.Services.WebMethod()>
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
Public Shared Function GetUploadSasUrl(fileName As String) As String

    Dim connectionString As String =
        clsCommon.GetConfigurationValue("STORAGE_CONN_STRING")

    Dim containerName As String =
        clsCommon.GetConfigurationValue("STORAGE_CONTAINER")

    Dim storageAccount = CloudStorageAccount.Parse(connectionString)
    Dim blobClient = storageAccount.CreateCloudBlobClient()
    Dim container = blobClient.GetContainerReference(containerName)

    Dim blobName = Uri.EscapeDataString(fileName)
    Dim blockBlob = container.GetBlockBlobReference(blobName)

    Dim sasPolicy As New SharedAccessBlobPolicy() With {
        .SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(10),
        .Permissions = SharedAccessBlobPermissions.Write
    }

    Dim sasToken = blockBlob.GetSharedAccessSignature(sasPolicy)

    Return blockBlob.Uri.ToString() & sasToken
End Function

返回的URL示例：

https://dbatchattachmentsuat.blob.core.windows.net/dbatch-uat/test12.jpg?sv=...&sp=w

Frontend 上传代码 #

async function uploadToAzure(file, sasUrl) {

    try {

        const response = await fetch(sasUrl, {
            method: "PUT",
            headers: {
                "x-ms-blob-type": "BlockBlob",
                "Content-Type": file.type
            },
            body: file
        });

        console.log("STATUS:", response.status);

    } catch (err) {
        console.error("FETCH ERROR:", err);
    }
}

Azure 配置 #

Blob Service → CORS 设置：

• 允许的源（Allowed origins）：https://localhost:44380
• 允许的方法（Allowed methods）：PUT, GET, OPTIONS
• 允许的请求头（Allowed headers）：*
• 暴露的响应头（Exposed headers）：*

CSP 配置尝试 #

在web.config中添加了以下配置：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy"
           value="default-src 'self' https://apps.itl.co.tz/broker/;
                  connect-src 'self' https://dbatchattachmentsuat.blob.core.windows.net;" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

但浏览器仍提示：

connect-src not explicitly set
default-src is used as fallback

这表明可能有其他CSP头在覆盖当前配置。

观察到的行为 #

• SAS URL是有效的
• Azure CORS已正确配置
• 请求从未到达Azure服务器
• 浏览器在发起网络请求前就拦截了请求
• fetch()立即抛出TypeError: Failed to fetch错误

问题 #

1. 在IIS托管的ASP.NET应用中，如何定位是哪一层在覆盖CSP头？
2. 当启用CSP时，允许通过SAS URL上传Azure Blob的推荐方式是什么？
3. 针对Azure Blob的PUT上传，正确的CSP配置应该是什么样的？

任何关于诊断CSP覆盖问题或最佳配置实践的指导都将非常感谢。

备注：内容来源于stack exchange，提问作者priya thorat