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?
That SVG image is provided by a data:
URL, so your CSP policy must be updated to allow that.
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'
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.