content-security-policy

content security policy for svg with inline style

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?

Solution

  • 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