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?

Solution

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.

Comments

[Chris]

It should be noted that this opens the page up for an attack vector for any item on the page using object-src data. If your goal is security you'd be better off using a sha hash of the script trying to be executed rather than opening up this hole.

[Khom Nazid]

@Chris what's the mechanism to do an SHA hash, to include in the CSS? If the original is background-image:url("data:image/svg+xml;charset=UTF-8,%3Csv‌​g%20width%3D%2220%22‌​%20height%3D%2220%22‌​%20viewBox%3D%220%20‌​0%2020%2020%22%20xml‌​ns%3D%22http%3A%2F%2‌​Fwww.w3.org%2F2000%2‌​Fsvg%22%3E%0A%20%20%‌​20%20%3Ccircle%20fil‌​l%3D%22none%22%20str‌​oke%3D%22%23e5e5e5%2‌​2%20stroke-width%3D%‌​222%22%20cx%3D%2210%‌​22%20cy%3D%2210%22%2‌​0r%3D%227%22%20%2F%3‌​E%0A%3C%2Fsvg%3E%0A"‌​);, should I just so an SHA of the text there?