为什么 Firefox 中不显示 base64 CSS 背景图像？答案

【问题标题】：Why don't base64 CSS background images show up in Firefox?为什么 Firefox 中不显示 base64 CSS 背景图像？
【发布时间】：2015-11-07 02:17:59
【问题描述】：

刚刚将我的浏览器升级到 Firefox 40（两天前发布），现在我注意到 base64 CSS 背景图像不再显示。所有其他浏览器，包括旧版本的 Firefox，都可以正常加载图像。

在控制台中，我收到以下错误：

内容安全政策：页面的设置阻止了在 data:image/png;base64,iVBORw0KGgoAAAA ......... CuwAAAABJRU5ErkJggg== ("default-src *") 处加载资源。

我的 CSS 如下所示：

.image {
    background-image: url("data:image/svg+xml;base64,iVBORw0KGgoAAAA .....");
}

我正在使用 Angular 并且在 html 标签中包含了 ng-csp 指令，尽管删除它没有任何区别。

【问题讨论】：

你忘记background了吗？您当前的 CSS 无效。
糟糕，是的，我忘记在此处包含它，但现在添加了。我的 CSS 中确实有背景，但为了简洁起见，我省略了其他属性并添加了省略号。此外，删除数据引号没有任何区别。在 FF 检查器中，或使用在新选项卡中打开选项，我可以打开图像；只是没有显示在页面上。
对我来说听起来像是 FF 中的一个错误。创建演示
见stackoverflow.com/a/18449556/453331
使用带有简单标记的隔离演示，我无法复制它并且测试图像加载得很好。我怀疑它与 Angular ng-csp 相关，因为我正在处理的网站的其他部分使用相同的 base64 图像，并且它在 FF40 中加载良好，并且它们没有 ng-csp 指令（我已经尝试删除手动）。

【解决方案1】：

kba 留下的评论是解决方案！添加一个带有 "* data:" 的 img-src 的 Content-Security-Policy 标头就可以了。新的 Firefox 不包含 data: 协议作为 * 的一部分，因此需要明确添加。

【讨论】：