0

In my React application I'm having trouble displaying an icon from the vsc module because of CSP:

Content Security Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml,<svg xmlns='http://ww/… (“default-src”).

My Content Security Policy looks like:

default-src 'self'; style-src 'self' 'unsafe-inline' data:; font-src https://static.skyassets.com data:; frame-ancestors 'none'; img-src 'self' data:; object-src 'self' data:;4

Whereas the HTML is:

<button class="css-m8wrzs"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="css-xxyih9" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2v1.67l-5 4.759V14H6V8.429l-5-4.76V2h14z"></path></svg></button>

With the .css-xxyih9 being:

fill: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><linearGradient id='lgm3ufb5'><stop offset='0' stop-color='%235888cf'/><stop offset='1' stop-color='%231155bb'/></linearGradient></svg>#lgm3ufb5");

Any suggestions?

Antonio Santoro
  • 147
  • 11
  • Multiple CSPs? As you have defined img-src, it seems it is using a CSP with fallback to default-src for images. Check meta tags and response headers. Content needs to pass all CSPs present. – Halvor Sakshaug Nov 15 '22 at 04:38
  • There a single CSP that's the one above – Antonio Santoro Nov 15 '22 at 16:36
  • Restring to guessing... It is perhaps not treated as an image. Try adding data: to default-src and check if it passes. If it does, then try to figure out which directive it fits, it could be media-src or object-src. The answer by stoicalpirate at https://stackoverflow.com/questions/46408595/content-security-policy-csp-how-to-allow-svg-image-in-object could also be helpful. – Halvor Sakshaug Nov 16 '22 at 09:59

0 Answers0