CODEWITHSUNDEEP
javascriptfirefoxblobcontent-security-policy
Suhas Bhattu
Suhas Bhattu

Reputation: 551

Unable to download blob in firefox due to CSP error

I am trying to download a PDF file from the blob. The whole thing is in the iframe and when I try to download it, it throws this error in console: Content Security Policy: The page’s settings blocked the loading of a resource at blob:http://localhost:8080/myApp/31d389m6-8njb-n7gv-427n-bm86ynte36hc("child-src"), I have tried this:

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName || 'download';
document.body.appendChild(a);
const clickHandler = function() {
    setTimeout(function(){
        URL.revokeObjectURL(url);
        this.removeEventListener('click', clickHandler);
        a.parentNode.removeChild(a);
    }, 150);
};
a.addEventListener('click', clickHandler, false);
a.click();

I have added <meta http-equiv="X-UA-Compatible" content="IE=edge"> to both main page and as well as in the iframe, still this error is there. It is working on other browsers like chrome and edge. Is there anything I am missing?

Upvotes: 4

Views: 3424

Answers (1)

Tarun Chopra
Tarun Chopra

Reputation: 456

Add "blob:" as "frame-src" in CSP, as per the statement "Some browsers specifically exclude blob and filesystem from source directives." (reference https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src)

I feel firefox is one of those browsers. In my case this fixed the issue.

Upvotes: 1

Related Questions