Firefox点击导出按钮触发Content-Security-Policy blob资源拦截问题求助

问题分析 #

你遇到的错误提示表明页面的**Content-Security-Policy（CSP）默认规则（default-src）**禁止加载blob:协议的资源，而你之前添加的<meta>标签仅针对img-src（图片资源）设置了允许blob:，但导出的用户数据不属于图片类型，因此该规则无法覆盖当前限制。Chrome对CSP的解析逻辑与Firefox存在差异，所以该功能在Chrome中正常。

可行解决办法 #

• 修改CSP的meta标签，覆盖default-src规则
  将原meta标签替换为包含default-src允许blob:的配置，同时保留原有图片相关规则：

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' blob:; img-src * 'self' blob:;">
  

  这样既允许默认资源加载包含blob:，也不影响图片资源的原有规则。

• 检查并修改服务器端的CSP响应头
  如果你的服务器通过HTTP响应头设置了CSP（比如Content-Security-Policy响应头），页面中的meta标签会被服务器端的规则覆盖。此时需要在服务器的CSP配置中，给default-src添加blob:，或者根据导出逻辑的资源类型，将blob:添加到对应的指令中（比如script-src、worker-src等，具体取决于导出代码的实现方式）。

• 调整导出逻辑（备选方案）
  如果修改CSP规则存在困难，可以尝试调整导出代码：

  • 避免使用blob:协议，改用data: URI（仅适合小体积数据）；
  • 直接通过服务器接口生成下载文件，而非前端创建Blob URL触发下载。

内容的提问来源于stack exchange，提问作者NeERAJ TK