首页 > 解决方案 > 由于 CSP 错误,无法在 firefox 中下载 blob

问题描述

我正在尝试从 blob 下载 PDF 文件。整件事都在iframe里面,当我尝试下载它时,它会在控制台中抛出这个错误: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"),我试过这个:

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();

我已添加<meta http-equiv="X-UA-Compatible" content="IE=edge">到主页和 iframe 中,但仍然存在此错误。它适用于其他浏览器,如 chrome 和 edge。有什么我想念的吗?

标签: javascriptfirefoxblobcontent-security-policy

解决方案


在 CSP 中添加“blob:”作为“frame-src”,根据语句“某些浏览器专门从源指令中排除 blob 和文件系统。 ”(参考https://developer.mozilla.org/en-US/docs/Web /HTTP/Headers/Content-Security-Policy/frame-src )

我觉得firefox是那些浏览器之一。就我而言,这解决了这个问题。


推荐阅读