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.
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.”
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
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!
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.
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,
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.
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.
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.
Our website (and business!) is reported as unsafe due to this URL:
on all subdomains!
And yes, this is just an svg, Nothing else!
Problem only occurs in Edge! Nowhere else…
@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.