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

Question

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.

Its code looks like:

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)

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'".

How to configure CSP correct in this case?

Answer 1

I recently came across this same issue and was able to get around it by adding:

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

Answer 2

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

You don’t show your current policy 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'

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.