内容安全政策(CSP):如何在对象中允许SVG图片

问题描述

我正在使用js插件，该插件在自身内部添加了SVG图像.我已经在网站上添加了CSP策略，但是无法将其配置为允许插件的代码.

I am using the js plugin that adds inside itself SVG images.I have added CSP policy to my website, but I can't configure it to allow plugin's code.

其代码如下:

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 .

I am looking for a configuration that allows SVG image that is rendered in the object.I am tried different options from there - CSP: object-src.

但是我总是会像下一个一样出现错误:

But I am alway get error like next:

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?

How to configure CSP correct in this case?

推荐答案

该SVG图像由 data: URL提供，因此必须更新您的CSP策略以允许这样做.

That SVG image is provided by a data: URL, so your CSP policy must be updated to allow that.

您不会显示您当前的策略是什么或您在何处设置它，而是假设您使用 Content-Security-Policy 标头设置了该策略，并且当前具有object-src'unsafe-eval'，那么您可以通过将策略的该部分更新为以下内容来允许 data: URL:

You don’t show what your current policy is or where you’re setting it, but assuming you’re setting it with the Content-Security-Policy header and it currently has object-src 'unsafe-eval', then you can allow data: URLs there by updating that part of the policy to look like this:

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

这仅在 Content-Security-Policy 标头中显示了当前策略的相关部分.无论该标头值中当前有其他指令，您都希望保持原样.

That shows just the relevant part of the current policy in the Content-Security-Policy header. Whatever other directives you currently have in that header value, you’d want to preserve as-is.

这篇关于内容安全政策(CSP):如何在对象中允许SVG图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！