Firefox中Content Security Policy阻止svg icon sprite加载如何解决？

问题原因 #

该问题由Firefox和Chromium/Safari的CSP资源分类规则差异导致：

Chromium、Safari浏览器会将<use>标签引用的外部SVG雪碧图归属到img-src规则校验，而Firefox 93版本会将这类跨文件的SVG片段加载归属到child-src规则校验，你当前的CSP配置未声明child-src规则，因此触发了default-src 'none'的拦截逻辑。

修复方案 #

方案1（优先，改动最小） #

修改Apache服务器的CSP配置，新增child-src 'self'规则即可兼容Firefox，修改后的完整配置如下：

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'; child-src 'self'"

方案2（无外部资源依赖） #

将SVG雪碧图的内容直接内嵌到页面HTML中，<use>引用页面内部的SVG ID即可，无需加载外部SVG文件，自然不会触发CSP拦截，适合图标数量较少的场景。
示例写法：

<!-- 页面头部内嵌雪碧图 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="settings" viewBox="0 0 24 24">
    <!-- 图标路径 -->
  </symbol>
  <!-- 其他图标symbol -->
</svg>

<!-- 调用图标 -->
<svg class="icon"><use href="#settings"></use></svg>

方案3（兼容极旧版本Firefox） #

如果还需要兼容更旧的Firefox版本，可以在CSP中额外补充font-src 'self'规则，部分极旧版本Firefox会将SVG图标资源归类到字体资源校验。

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