Cordova - CSP refuses to load media blob

Question

I'm trying to load get some audio data from an HTTP POST request and then play it from an Android device. This is the code that handles that operation:

var xhr = new XMLHttpRequest();
xhr.open('POST', encodeURI(myURLString), true);
xhr.responseType = 'blob';
xhr.onload = function(evt) {
    var blob = new Blob([xhr.response], {type: 'audio/wav'});
    var audio = new Audio();
    audio.src = URL.createObjectURL(blob);
    audio.play();
};
xhr.send(myData);

When I run it, I get the following error:

Refused to load media from 'blob:file:///d181cef8-136d-4dab-b5c6-598a0481755c' 
because it violates the following Content Security Policy directive: "media-src *".

I'm not sure how to set this directive to allow this file to be played, and I can't get this to work.

Any ideas? Thanks in advance!

Answer 1

Adding the blob: modifier to your content security policy should fix the issue. Your media-src directive could look something like this: media-src * blob: assuming it was media-src * before.

Further information on the media-src directive can be found in developer.mozilla.org.

---

Also, note that using * wildcards is generally not a good idea. It undermines the idea of whitelisting, which is described here. I also answered a question on how to get rid of wildcards here.

Answer 2

I had same issue with electron app below meta tag solved my problem

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' file: data: blob: filesystem:; default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>