Question 105364 in Azure Question posted in
The official documentation to get you started can be found here.

How to allow the execution of Azure Blob Storage upload in a React application without violating Content Security Policies?

I have an Azure Storage Account and a container in there where I want to upload my files from my React application. Using an Azure Function, I generate and return SAS Keys to my React application to be able to upload a file. The SAS Key comes with the appropriate permissions needed ("cw"). The CORS rules on my storage account have been set to accept everything.

Here is the function that I am using to execute my upload, which I have learned from Microsoft’s lesson:

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 is the URL of the storage account.
file is an interface that holds file information like name and the actual file itself.
sasKey is the SAS Key returned to me by my Azure Function.

When this runs, I get this error:

Refused to connect to ‘https://storageaccount.blob.core.windows.net/container/file-name.extension?sasKey’ because it violates the following Content Security Policy directive: "default-src ‘self’". Note that ‘connect-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

I have added a new meta tag in my index.html file that handles CSP. I have added this to allow everything for now, but even then that does not seem to be enough:

<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';">

What CSP rule am I missing or have incorrectly set up? Why is it telling me that connect-src is not explicitly set? Why is it violating default-src 'self' when that was never stated in my CSP? Is my upload process correct? Have I misconfigured something?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have finally figured out the answer. The problem was that the front end was bundled and served statically using express. The express server was using helmet as middleware. helmet was creating its own Content Security Policy. I edited the policy to what I needed, and it worked as expected!


  2. 0

    The most likely explanation is that two or more policies are defined, and all content needs to pass all policies present. In addition to your policy in meta tag there is likely one (or more) defined in a response header that sets "default-src ‘self’". You will need to find how this policy is set and disable or modify it. It can be set by framework, web server, load balancer etc.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search