CSP error while playing a remote audio file in Firefox WebExtension

Question

I'm developing an extension that I need to play an audio from the remote server and I have another server to fetch other information.

I put the following line in manifest.json:

  "content_security_policy": "default-src 'self' https://firstserver.com https://serverwithaudio.com;"

I also tried

  "content_security_policy": "default-src 'self' https://firstserver.com; media-src  https://serverwithaudio.com;"

but none of them worked and I still get this error:

Content Security Policy: The page’s settings blocked the loading of a resource at https://serverwithaudio.com/media/audio1.mp3 (“default-src”).

Is it possible to play a remote audio from two different sources or I missed something in my manifest.json

Answer 1

I solved the issue.

First of all if you put content_security_policy in your manifest.json, you won't be able to submit it in Mozilla extension directory.

Second, I moved the audio file to the same server as I get the information. then play the audio from background script.

when I click on the button on content script I send a message to background script with the audio url:

 let audioUrl = "https://example.com/media/audio.mp3";
 chrome.runtime.sendMessage({audio: audioUrl});

And in background script:

chrome.runtime.onMessage.addListener(function(req, sender, sendResponse){
    if (req.audio) {
        (new Audio(req.audio)).play();
    }
    return true;
});

and bear in mind that you still need to mention your host in permission directive.

  "permissions": [
      "*://example.com/"
  ]