内容安全策略（CSP）：如何在对象中允许 svg 图像

Question

我正在使用在自身内部添加 SVG 图像的 js 插件。我已将 CSP 政策添加到我的网站，但我无法将其配置为允许插件代码。

它的代码如下：

label=$("<object style='height:10px; width:10px;' type='image/svg+xml' data='data:image/svg+xml;charset=UTF-8," +
"<svg xmlns=\"http://www.w3.org/2000/svg\">" +
"<rect x=\"0\" y=\"0\" some parameters/>"+
"<text>SomeText</text></svg>'></object>");
el.html(label)

我正在寻找允许在对象中呈现 SVG 图像的配置。我从那里尝试了不同的选择 - CSP: object-src.

但我总是得到如下错误：

Refused to load plugin data from 'data:image/svg+xml;charset=UTF-8, my svg here' because it violates the following Content Security Policy directive: "object-src 'unsafe-eval'".

这种情况下如何正确配置CSP？

Answer 1

该 SVG 图像由 data: URL 提供，因此您的 CSP 政策必须更新以允许该图像。

您没有显示您当前的政策或设置它的位置，但假设您使用 Content-Security-Policy header 设置它并且它当前有 object-src 'unsafe-eval'，那么您可以通过将政策的那部分更新为如下所示来允许 data: URL 存在：

Content-Security-Policy: object-src data: 'unsafe-eval'

这仅显示 Content-Security-Policy header 中当前政策的相关部分。无论您当前在该 header 值中有什么其他指令，您都希望保留 as-is.

Answer 2

我最近遇到了同样的问题，并且能够通过添加来解决它：

Content-Security-Policy: img-src data: w3.org/svg/2000

内容安全策略（CSP）：如何在对象中允许 svg 图像

Content-Security-Policy (CSP): how to allow svg image in object

javascript

configuration

svg

data-uri

content-security-policy