SVG images are black when using Content Security Policy

Issue #12939106 • Assigned to Bogdan B.

Details

Author
Roberto P.
Created
Jul 26, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 5 people

Sign in to watch or report this issue.

Steps to reproduce

When using a Content-Security-Policy like the following:
"Content-Security-Policy", “default-src https:; img-src ‘self’ data: https:”

Edge does not render SVG images properly (loaded using image src attributes); logging this error message:
CSP14321: Resource violated directive ‘default-src https:’ in Content-Security-Policy: inline style, in https://localhost:44393/ at line 81 column 8. Resource will be blocked.

Interestingly, the images are not blocked completely: only their colors. So, shapes are visible with their transparencies, but are all black.

This problem occurs only in Edge. SVG images are rendered properly by all other browsers, including IE11.

Attachments

2 attachments

Comments and activity

  • Don’t be fooled by “localhost” which I forgot to remove: the problem occurs in web applications that are published and online.

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi Roberto,

    Can you provide your HTML page so I can see how the SVG resource is being loaded?  If you have a simplified repo that would be even better.

    Appreciate the support,

    The MS Edge Team

  • Hi Steven,
    I am using regular src attribute, so the HTML received by client looks like this:

    Files exist on the server and are downloaded by client, since they’re partially rendered by Edge: vectorial shapes are rendered, but in plain black.

    IE11 and other browsers render properly the same pictures.

  • Sorry Steven, but the HTML fragment was removed from my previous comment, I write again using markdown:

    
    
    
  • Steven, the preview of the message was right, but it’s not rendered on this page!

    So, once again… replacing less-than sign with [ and greater-than sign with ]:

    [img src="/images/example.svg" alt="Example" /]
    
  • Hi, is there any news about this?
    I don’t care that much about Edge support, since my organization still uses officially IE11. At this point I am more curious whether bug reports are taken into consideration - since this is clearly a bug in Edge and can be reproduced in 15 minutes.

    I already explained above how to reproduce and see the bug.

    Otherwise, next time I notice something not working in Edge I won’t waste my time to let you know.

  • Hi Roberto, I’ve been having a similar issue with SVG gradients and masking, it seems like it’s broken in Edge 38 but it works with Edge 40. Maybe try to reproduce your issue in Edge 40? Note that you’ll need to have Creators Update installed (1703 version of Windows rather than 1607 which may be latest for enterprise clients).

  • Hi Jaroslav, thanks for your message.
    I just verified, that I have the same problem with Microsoft Edge 40.15063.0.0
    There is also a second line with this version: Microsoft EdgeHTML 15.15063

    I don’t know what the Creators Update is, do you need I need to have this, in order to have Edge 40?

  • Hi Roberto, thanks for providing your version, seems like these issues are unrelated then… I think you have the Creators Update installed if you have Edge 40… Anyway, good luck with the issue!

  • Hi Roberto,

    Apologize for the delay.  We do appreciate the submission, even if I am slow to get to them.  I will tell you that bug reports with a simplified repro gets acted on faster than those without a repro.  This is the case even for reports that seem simple to repro.

    In this specific case, I should have just request that you upload a simplified repro.  I see that the error being reported is about the inline style.  I think you should add that to your CSP config on your webserver.  That would explain the odd behavior of the style/color getting blocked.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

    Search for the “Examples” section.  I believe it is the ‘unsafe-inline’ and the ‘unsafe-eval’ that will need to be added. 

    “Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https:”

    Again sorry for the delay and let me know if this was the issue,

    Steve 

  • Another option is to move the CSS out of the HTML into a separate file.  I do that sometimes to avoid having to modify the server config.  :)

  • Also, I assumed you have a separate line in your HTML for CSS.  I just realized that could be a bad assumption and especially for an SVG test.

    The error states that the policy directive being violated is the 'inline style’, perhaps SVG’s need that directive to work.  Can you try adding ‘unsafe-inline’ to the default-src?  If that works, then it can be moved to the img-src area.

  • Hi Steven,
    Thanks for your kind answers, and sorry if I sounded too harsh in my last message. I know that I could convert svg files to base64 encoded strings inside CSS, for example; in this specific case though, it makes sense to keep images separately since they won’t be downloaded all together and only occasionally.

    I will try to add ‘unsafe-inline’ to CSP header and check if this helps. This behavior happens only in Edge: it could also be the case that Edge is the only browser following specifications literally and thus presenting this “complication” with SVG files in.

  • Hi Roberto,

    No problem at all.  I did take a couple months
    to respond.  :-/

    Also, I think this is an interesting submission and am curious what you find.  I think a lot of other user’s will appreciate knowing as well.

    Steve

  • Our website (and business!) is reported as unsafe due to this URL:

    https://www.cutoutcow.com/wp-content/themes/salient/css/fonts/svg/arrows_shrink.svg

    on all subdomains!

    And yes, this is just an svg, Nothing else!

    Problem only occurs in Edge! Nowhere else…

    Alexander

  • @Roberto, checking to see what you found related to the SVG CSP.

    @Alexander, what version of Windows 10 are you using?  When I open the URL you listed it shows as secure on 16299.125.

  • The Question I have is why is Edge disallowing coloring of the SVG in an img tag?

    Why is Edge telling that: script eval and inline style are violated by a simple
    `` ?

    Yes, there is inline style

  • Hmm, may it is not clear.

    For the HTML the CSP is only for self, but the .svg is a seperat request. If i allow the “bad things” for that request, will this work?

  • No, it is not working. Why you are hurting us web developers ;)

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

  • Hello all,

    I finally created a repro for this issue.  There are a handful of ways to style CSS and various CSP configurations to test. See the following references:

    Current
    https://www.w3.org/TR/SVG11/styling.html

    Draft
    https://svgwg.org/svg2-draft/styling.html#StylingUsingCSS

    I tested the following because they appear to be the what is causing this reported issue:

    • Inline style - via SVG element style attribute (in linear gradient)

    • Internal CSS style - via SVG style embedded in document (I used CDATA)

    I verified that using the submitter’s (Roberto’s) CSP did block the styling/color information:
    { directives:
       { defaultSrc: [ ‘http:’ ],
         imgSrc: [ '’self’’, 'data:’, ‘http:’ ] } }

    I also verified that by adding styleSrc: ‘unsafe-inline’ that the styling (color information) is displayed.
    { directives:
       { defaultSrc: [ ‘http:’ ],
         styleSrc: [ ‘’unsafe-inline’’ ],
         imgSrc: [ '’self’’, 'data:’, ‘http:’ ] } }

    I attached the nodejs testing server I used.  The node/npm HelmetCSP module made testing various CSP configurations easy.  Fyi, you would need to add an HTML file in a public directory if you do use this.  You will see that route in the index.js file.  To run you will need nodejs installed.  Here are the commands to run the server:

    • rename the file ‘public-package.json’ to ‘package.json’
    • Open PS or gitbash
      npm update
      node public-index.js

    @Albert, lol, <really sad and hurt>I was wondering</really sad and hurt> why someone wouldn’t share their repro.  :)

    Thanks again for everyone’s help and pushing on this issue,

    Steve

  • @Steve a repro, thougt a repro was attached in the issue. Here is a public one https://login.biontechonline.de

    Allowing unsafe-inline on html makes no sense in this case, allowing unsafe-inline on the svg maybe make sense. But Firefox and Chrome think it’s not needed.

    unsafe-inline on the html makes so sense because it’s weakens the security for the whole site.

    So will this be fixed?

You need to sign in to your Microsoft account to add a comment.

Sign in