Content-Security-Policy (CSP): comment autoriser l'image svg dans l'objet

Question

J'utilise le plugin js qui ajoute à l'intérieur des images svg. J'ai ajouté la politique CSP à mon site mais je ne peux pas la configurer pour autoriser le code du plugin.

Son code ressemble:

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) 

Je cherche configuration qui permet l'image svg qui est rendu dans l'objet. Je suis essayé différentes options à partir de là - CSP: object-src.

Mais je alway obtiens l'erreur suivante comme:

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

Comment configurer CSP correct dans ce cas?

Answer 1

Cette image SVG est fournie par une URL data:, vous devez donc mettre à jour votre stratégie CSP pour l'autoriser.

Vous ne montrez pas ce que votre politique actuelle est ou lorsque vous configurez, mais en supposant que vous configurez avec l'en-tête Content-Security-Policy et il a actuellement object-src 'unsafe-eval', vous pouvez autoriser y data: URL en mettant à jour cette partie de la politique à ressembler à ceci:

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

cela montre juste la partie pertinente de la politique actuelle dans l'en-tête Content-Security-Policy. Quelles que soient les autres directives que vous avez actuellement dans cette valeur d'en-tête, vous voudriez conserver tel quel.