SVG images are black when using Content Security Policy

Issue #12939106 • Assigned to Steven K.

Details

Author
Roberto P.
Created
Jul 26, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 2 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

0 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!

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

    Sign in