Buffer progress bar "ball" is blocked by CSP due to data url svg #8876
Description
Bug, feature request, or proposal:
Currently the buffer bar has inlined SVG's loaded with a data-url, however this is blocked when content security policy are set with the directive "img-src 'self'".
Refused to load the image 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D[...]' because it violates the following Content Security Policy directive: "img-src 'self'".
What is the expected behavior?
All assets should be able to load with tight CSP configuration
What is the current behavior?
Assets loaded via data url are blocked by CSP
What are the steps to reproduce?
(this cannot be reproduced in Stackblitz etc due to CSP being set by webserver or within <head>)
- Set the CSP to contain
img-src 'self'
e.g.
content-security-policy:default-src 'none';object-src 'self';manifest-src 'self';script-src 'self';img-src 'self';style-src 'self' 'unsafe-inline';frame-src 'self';worker-src 'self' blob: - Insert a
<mat-progress-bar mode="buffer"></mat-progress-bar> - See the inlined svg is blocked by the policy
What is the use-case or motivation for changing an existing behavior?
MDN states that allowing data: urls is insecure:
A schema such as 'http:' or 'https:'. The colon is required, single quotes shouldn't be used. You can also specify data schemas (not recommended). data: Allows data: URIs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Since at least Material 5.0.0
Is there anything else we should know?
This is already marked with a TODO, but it is good to have an issue to track the reason why the TODO should be actioned.
Given the content of the svg is simply a circle, it is probable that the same effect can be achieved with a rounded block element without causing any kind of breaking change.