Recently I've been trying to make some improvements to sites that I'm ivolved with, particularly converting images to SVG format and implementing HTTP Content Security Policy (more to come on those later). While doing so I ran into a strange issue to do with how Microsoft Edge handles the combination of these two technologies which only seems to be documented in an Edge bug report.
Note: Edge is now based on Chromium and the content below no longer applies if you're up to date.
What is SVG?
SVG is an XML-based image format for vector graphics. In short, it allows you to use images on web pages which scale without distortion, particluarly on the high resolution displays that are now becoming the norm.
What is Content Security Policy (CSP)?
Content Security Policy allows you to set restrictions on the type of content that can be loaded on a web page by setting a HTTP header. In its most strict form it allows you to completely disable things such as inline JavaScript and CSS to help guard against XSS vulnerabilities being exploited.
The problem
SVG files commonly use CSS in order to style different parts of the image. Most browsers allow this with a strict Content Security Policy if the SVG is a subresource and not part of the web page itself (and therefore the CSS obviously hasn't been injected into the web page). Edge however applies the policy to SVG images included in the page as a subresource too (seemingly incorrectly) and refuses to read the SVG's CSS rules. The result is an image with no colour in the best case, and a black rectangle in the worst case. You can see the bug report for this issue on Microsoft's bug tracker.
What can we do?
Until Microsoft address the issue (which has been open for over 18 months now) there are a few things that can be done, the practicality of each will depend on your particular use case:
- Don't use SVG images which make use of CSS for styling
- Allow 'unsafe-inline' styles in your Content Security Policy (but only for styles!)