内容安全策略正在阻止 Firefox 中的 svg 图标精灵

Posted 2023-03-28

【中文标题】内容安全策略正在阻止 Firefox 中的 svg 图标精灵

【英文标题】：Content Security Policy is blocking an svg icon sprite in Firefox

【发布时间】：2021-11-29 18:24:17

【问题描述】：

我试过在网上搜索，但没有运气。我一直在使用 Chrome/Edge 在我的网站上工作，今天我尝试在 Firefox (93.0) 中打开它，我注意到我的图标都没有加载。此错误消息出现在控制台中：

内容安全政策：页面设置阻止加载 http://localhost/icons.svg（“default-src”）的资源。

这似乎表明 default-src 被用作后备。我正在使用此 CSP 运行 Apache 服务器：

Header set Content-Security-Policy "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; connect-src 'self'"

图标精灵是这样使用的：

<svg class="icon"><use href="icons.svg#settings"></use></svg>

这只是 Firefox 中的一个问题，因为 Edge、Chrome 和 ios Safari 都可以正常工作。我有什么办法可以解决这个问题吗？

【参考方案1】：

这是一个旧的 Firefox 浏览器错误 - img-src 指令在 <use xlink:href=> 标记中执行 not cover 源。

Firefox 使用default-src 来控制<use xlink:href=> 标签，因此修复问题时使用default-src 'self' 而不是default-src 'none'。

【讨论】：

谢谢，这对我有用。我对这个解决方法不是很满意，但我还没有找到任何其他方法来解决这个问题。