content security policy for svg with inline style

Question

I have the following svg image:

<svg viewBox="0 0 679.26666 170.12"><title id="title">Disclosure Scotland</title>
  <desc id="descA">Main Image</desc><defs id="defs6"></defs><g transform="matrix(1.3333333,0,0,-1.3333333,0,170.12)" id="g10">
     <g transform="scale(0.1)" id="g12">
         <path id="path14" style="fill:#354a8e;fill-opacity:1;fill-rule:nonzero;stroke:none" d="L 4424.6,237.121">
         </path>
     </g>

 </svg>

It has inline styles, the content security policy is complaining with the following warnings:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-n9prShQTue5kpNbWK2Rpxv1agUjurIm2Wkpn0y7gOvU='), or a nonce ('nonce-...') is required to enable inline execution.

10localhost/:13 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-hyCd2mGzJH6FFMa/YKxkUO5p7ntTtWZ4+813FvHVP5w='), or a nonce ('nonce-...') is required to enable inline execution.

I can silence that error by configuring styleSrc like this:

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"]
    }
  })
);

Can I configure the inline style just for the svg?

score 4 · Answer 1 · answered Mar 24 '22 at 10:02

4

The easiest way to solve this is by adding the attributes directly, instead of using inline style;

     <path id="path14" style="fill:#354a8e;fill-opacity:1;fill-rule:nonzero;stroke:none" d="L 4424.6,237.121">

to:

     <path id="path14" fill="#354a8e" fill-opacity="1" fill-rule="nonzero" stroke="none" d="L 4424.6,237.121">

answered Mar 24 '22 at 10:02

J. Adam

1,457
3
20
38

This might not work for more complex drawings where you need styles that don't have a dedicated attribute, but it worked perfectly for the small icon I was using. – Jasper Jan 03 '23 at 11:44

Stephen R · Accepted Answer · 2018-08-12T11:45:43.733

3

Not specifically just for SVG, no. CSP doesn’t allow that type of fine control. What you can do is:

1) use CSP nonces

2) use classes or ID (and corresponding CSS in a stylesheet)

3) use JavaScript to modify the CSS directly https://stackoverflow.com/a/29089970/339440

edited Aug 12 '18 at 11:45

answered Aug 12 '18 at 11:39

Stephen R

3,512
1
28
45

The third option fails in Firefox with CSP error. The possible reason may be that svg element has a different namespace. Is it an expected behavior or an implementation bug? – Роман Парадеев Aug 20 '18 at 21:10
Is there a reason you can’t add the svg’s style to a stylesheet? – Stephen R Aug 21 '18 at 03:21
I believe it should work. Personally I tend to use jQuery, but jQuery itself manipulates the CSSOM as described in that linked answer – Stephen R Aug 21 '18 at 03:23
The exact sequence of steps is a bit different in my case. I've created a question – https://stackoverflow.com/questions/51939184/csp-rules-applied-differently-to-svg-in-firefox – Роман Парадеев Aug 21 '18 at 09:51
Some SVGs come from publishers, and have the styles in them. So constantly editing and re-editing 3rd party SVG's every time they get updated, to move their style to a CSS sheet, is a royal time-waster and slam. Having to develop a whole system just to make SVG happy, is a pain. Shame CSP doesn't have a 'self-hosted svg allowed' setting. – IncredibleHat Apr 26 '20 at 17:25

content security policy for svg with inline style

2 Answers2