Home > Net >  Error in setting Content Security Policy for loading video from another domain
Error in setting Content Security Policy for loading video from another domain

Time:10-07

I am not able to load a video on my site which I am trying to load from Google Cloud:

In my Node.js server, I have the following to redirect the URL, after checking for its match:

  if (url == "targetUrl") { //the URL I am trying to match
    res.writeHead(301, {
      Location: 'https://storage.googleapis.com/myCloudFolder/someVideo.mp4'
    }).end();
  }

My Content Security Policy for media-src is set in the header as:

"media-src 'self' https://storage.googleapis.com/myCloudFolder  blob:; 

I get the following errors in the browser's console when the video is loaded:

Refused to load media from '<URL>' because it violates the following Content Security Policy directive: "media-src 'self' <URL>  blob:".

abc.def.com/:1 Refused to load media from 'https://storage.googleapis.com/myCloudFolder/someVideo.mp4' 
because it violates the following Content Security Policy directive: 
"media-src 'self' http://storage.googleapis.com/myCloudFolder  blob:".

On the video element itself, the error displayed is:

 The media could not be loaded, either because the server or network failed or because the format is not supported.

In the media-src, I tried by dropping the scheme (https://) as well as by using http, but the error persists.

My question is: What should I set the media-src to, to load the video from https://storage.googleapis.com/myCloudFolder

CodePudding user response:

Your content-security policy should be

media-src 'self' https://storage.googleapis.com/myCloudFolder/ blob:

The trailing slash after myCloudFolder is needed to match all files in that folder. Without the trailing slash only the exact path is matched. See here.

  • Related