Home/Insights/Azure

Troubleshooting Azure Blob Upload Failures Due to CSP in ASP.NET WebForms

Use this when browser uploads to Azure Blob Storage fail with CSP Failed to fetch errors. config.

Quick Read

  • Symptom: Use this when browser uploads to Azure Blob Storage fail with CSP Failed to fetch errors. config.
  • Check first: Capture the exact browser console CSP violation and blocked URL.
  • Risk: Security-sensitive

Symptoms

Azure Blob upload using SAS URL fails with TypeError: Failed to fetch due to Content Security Policy (CSP) violations.

Environment

ASP.NET WebForms application hosted on IIS, using Azure Blob Storage for file uploads.

Most Likely Causes

The Content Security Policy (CSP) configured in the ASP.NET WebForms application is blocking the request to the Azure Blob Storage endpoint, resulting in a TypeError during the upload process.

What to Check First

  1. Capture the exact browser console CSP violation and blocked URL.
  2. Confirm whether the upload uses Blob service, Data Lake endpoint, CDN, or a custom domain.
  3. Back up the current `web.config` before changing CSP headers.

Fix Steps

  1. Identify the current CSP settings

    Check the existing Content Security Policy settings in the web application to understand the restrictions in place.

    Example pattern only. Adjust for your environment before running.

    Open the web.config file located in the root of your ASP.NET WebForms application.
Locate the <httpProtocol> section and find the <customHeaders> subsection.
Look for the header 'Content-Security-Policy' to review its current directives.
  2. Modify CSP to allow Azure Blob Storage

    Update the Content Security Policy to permit requests to the Azure Blob Storage endpoint used for uploads.

    Example pattern only. Adjust for your environment before running.

    Add or modify the Content-Security-Policy header in the <customHeaders> section of the web.config file.
Include the Azure Blob Storage URL in the 'connect-src' directive. For example: 'connect-src https://<your-storage-account-name>.blob.core.windows.net;'
Ensure that the header looks similar to this: 'Content-Security-Policy: default-src 'self'; connect-src https://<your-storage-account-name>.blob.core.windows.net;'
  3. Test the updated CSP settings

    After modifying the CSP settings, deploy the changes and test the file upload functionality to ensure it works as expected.

    Example pattern only. Adjust for your environment before running.

    Rebuild and redeploy the ASP.NET WebForms application to IIS.
Open the browser's developer tools (F12) and navigate to the 'Network' tab.
Attempt to upload a file to the Azure Blob Storage using the SAS URL.
Check for any CSP-related errors in the console or network logs.
  4. Verify browser compatibility

    Ensure that the browser being used supports the CSP directives and does not have any extensions that may interfere with the upload process.

    Example pattern only. Adjust for your environment before running.

    Test the upload functionality in multiple browsers (e.g., Chrome, Firefox, Edge) to confirm the issue is not browser-specific.
Disable any browser extensions that may affect network requests and retry the upload.

Validation

  • Browser developer tools no longer show a `connect-src` CSP violation for the blob upload URL.
  • The upload request returns the expected HTTP status instead of being blocked by the browser.
  • Existing same-origin scripts, styles, and API calls still pass under the updated CSP.

Logs to Check

  • Browser console CSP violation details.
  • Browser Network tab for the blocked request and response headers.
  • IIS logs for the page serving the CSP header.
  • Application logs around SAS URL generation without logging the SAS signature.

Rollback and Escalation

  • Restore the previous `web.config` or CSP header if the new policy breaks other application calls.
  • Remove temporary wildcard CSP entries after identifying the exact blob endpoint.
  • Recycle the app pool only during an approved window if configuration changes require it.

Edge Cases

  • If the application uses multiple subdomains, ensure that the CSP allows connections from all relevant subdomains.
  • If using a CDN or other third-party services, verify that their URLs are also included in the CSP directives.

Notes from the Field

  • Do not loosen CSP to `*` just to make the upload work. Add the narrowest Blob endpoint that matches the actual request host.
  • Separate browser CSP blocking from Azure Storage authorization. CSP failures are blocked before the request succeeds or fails at Storage.