如何在Content Security Policy中白名单整个含Sozi动画的SVG文件？

我完全懂你的困扰——给SVG里几十个带内联样式的元素逐个加哈希实在太折腾，又不想为了让SVG正常运行就放宽主页面的CSP安全规则。这里有个更省心的方案，既能保住主页面的严格安全标准，又能让你的动画SVG正常工作：

针对SVG文件单独配置CSP规则 #

你用<embed>嵌入的SVG是同源的独立资源，我们可以在.htaccess里给SVG文件单独设置一套宽松一点的CSP，主页面依然保持原有的严格规则。这样既能避免主页面暴露安全风险，又能允许SVG里的内联样式正常执行。

修改你的.htaccess内容如下：

# 主页面的严格CSP规则，保持不变
Header set Content-Security-Policy "default-src 'self'"

# 仅对SVG文件放宽样式相关的CSP限制
<FilesMatch "\.svg$">
    Header set Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline'"
</FilesMatch>

为什么这个方案可行？ #

当浏览器加载<embed>里的SVG时，会把它当作独立的浏览上下文处理，此时SVG会应用专门针对.svg文件设置的CSP规则，而不是直接继承主页面的规则。这样主页面依然维持default-src 'self'的高安全标准，只有你自己的SVG文件被允许使用内联样式，安全风险完全可控。

说说其他方案的问题（为什么不推荐） #

• 逐个添加内联样式哈希：要处理50多个元素的哈希，不仅工作量大，后续修改SVG内容时还得重新生成哈希，维护成本极高。
• 主页面加'unsafe-inline'：直接放宽主页面的CSP会引入不必要的安全漏洞，第三方恶意脚本或代码可能趁机利用内联执行权限搞事情。
• 转换Inkscape内联样式：需要改动SVG的结构，不符合你不想调整SVG内容的需求。

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