Nginx HTTP/2环境下Firefox显示SVG为黑色的问题修复咨询

安全阿岳

2026-8-28

问题根因

故障和HTTP/2协议、Brotli压缩、HTTP Basic Auth均无关系，核心诱因是新服务器Nginx返回的内容安全策略（CSP）配置拦截了SVG内部样式：
新服务器响应头携带的CSP规则为content-security-policy: default-src 'self'; script-src 'none'; style-src 'none'; object-src 'none';，其中style-src 'none'会禁止所有样式规则生效，包括SVG文件内部通过<style>标签定义的内嵌样式。
Firefox 101版本对CSP规则的执行逻辑与Chrome、Edge等浏览器存在差异：加载SVG资源时（无论直接访问SVG地址还是作为图片嵌入页面），会严格执行响应头携带的CSP规则，拦截内部<style>块定义的填充、描边样式。当前SVG中白色填充、白色描边的样式全部定义在内部<style>块中，被拦截后SVG路径会使用默认渲染规则：填充为纯黑色、无描边，最终呈现全黑效果。
本地打开下载的SVG文件正常，是因为本地文件加载不受HTTP响应头的CSP规则限制；旧服务器未返回CSP响应头，因此样式可正常加载。

解决方案

可任选以下一种方案修复：

方案1：调整服务端CSP配置（推荐，一劳永逸）
修改Nginx的CSP规则，将style-src 'none'调整为style-src 'unsafe-inline'，允许内联样式生效。该配置仅放开内联样式权限，不允许加载外部样式资源，不会引入额外安全风险。
修改后的CSP参考配置：
```
content-security-policy: default-src 'self'; script-src 'none'; style-src 'unsafe-inline'; object-src 'none';
```
如果不想全局放开内联样式权限，可以单独针对SVG资源匹配location规则，仅对SVG响应覆盖CSP配置即可。

方案2：修改SVG源码，移除内部样式依赖
无需调整服务端配置，直接将SVG内部<style>块定义的类样式，转换为对应path元素的原生属性，避开CSP对style块的拦截。修改后的可正常渲染的SVG代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 64 58" style="enable-background:new 0 0 64 58;" xml:space="preserve">
<path fill="#FFFFFF" d="M46.72,24.29h4.56c1.52,0,3.49,0.8,3.49,2.6c0,2.11-2.06,2.48-3.56,2.48h-4.49V24.29z M46.72,17.46h4.49  c1.87,0,3.14,0.63,3.14,2.46c0,1.17-1.15,2.15-3.06,2.15h-4.56V17.46z M51.22,31.61c3.16,0,6.06-0.82,6.06-4.63  c0-1.33-0.89-3.3-2.81-3.79c1.54-0.7,2.29-1.9,2.29-3.3c0-3.37-2.46-4.66-5.55-4.66h-8.84v2.22h1.92v11.89h-1.96v2.27H51.22z   M37.81,23.49c-0.02,2.99-1.73,6.15-5.85,6.15c-4.1,0-5.94-3.02-5.92-6.15c0-3.49,2.06-6.32,5.94-6.32  C36.03,17.24,37.83,20.4,37.81,23.49 M31.98,14.93c-5.01,0-8.42,3.58-8.42,8.56c0,4.3,2.69,8.47,8.38,8.47  c5.66,0,8.31-4.21,8.33-8.47C40.29,19.14,37.53,14.97,31.98,14.93 M12.86,17.48h5.08v7.39c0,2.81-1.5,4.73-4.38,4.73  c-2.83,0-4-1.68-4-4.59H7.08c0,4.31,2.48,6.9,6.48,6.9c4.28,0,6.9-2.88,6.81-7.04v-9.64h-7.51V17.48z"></path>
<path fill="none" stroke="#FFFFFF" stroke-width="3.042" stroke-linejoin="round" d="M15.85,45.44h4.04h34.99c4.23,0,7.65-3.43,7.65-7.65V9.61c0-4.23-3.43-7.65-7.65-7.65H9.48  c-4.23,0-7.65,3.43-7.65,7.65v18.26v9.92v18.91L15.85,45.44z"></path>
</svg>

该写法不依赖内部style块，即使CSP配置style-src 'none'也可正常渲染，全浏览器兼容。

验证方案：快速确认根因
可先在Nginx配置中针对SVG资源移除CSP响应头，重载Nginx后用Firefox访问，如果SVG恢复正常显示，即可确认故障由CSP规则导致。

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