bug(mat-progress-bar): Use of `data:` URI for buffer SVG is a regression that complicates strict CSP implementation

[Yanal-Yves]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

In Angular Material v20, the mat-progress-bar component in "buffer" mode uses a data:image/svg+xml,... URI to render its dotted buffer animation via a background-image style.
This is a change from Angular Material v14, where the SVG was injected directly into the DOM.
While the SVG itself is static and safe, this implementation forces developers who use a strict Content Security Policy (CSP) to enable img-src data:, which is widely considered a security risk as it opens a potential vector for XSS attacks: "(...)developers SHOULD NOT include (...) data: as valid sources in their policies."
Content Secruity Policy does not allow to be specific to allow only one particular data: URI.

I tried to generate a sha256 from the SVG based on what is output in the Google Chrome console :

Refused to load the image 'data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E' because it violates the following Content Security Policy directive: "img-src 'self' 'sha256-w6m3g59F/ECbFbkAT4tMCzZ06TdY+u9MjSbNwZy1T3g=' https://*.google-analytics.com https://*.googletagmanager.com".

w6m3g59F/ECbFbkAT4tMCzZ06TdY+u9MjSbNwZy1T3g= is the sha256 I get with this script :

echo -n "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'><circle cx='1' cy='1' r='1'/></svg>" | openssl dgst -sha256 -binary | base64

My CSP image source looks like to img-src 'self' 'sha256-w6m3g59F/ECbFbkAT4tMCzZ06TdY+u9MjSbNwZy1T3g=' and the error is still raising.
Debuging this is very time-consuming.

This is a significant regression from the v14 behavior, which was CSP-friendly out-of-the-box.

Proposed Solution / Suggestion:

1. Please consider reverting to the previous implementation of injecting the SVG directly into the DOM.
2. Providing an alternative mechanism that does not rely on data: URIs for styling.

This would greatly simplify CSP implementation for security-conscious applications. Thank you!

Reproduction

Steps to reproduce:

1. Create an Angular application with a strict Content Security Policy that does not include img-src data:. For example: img-src 'self';.
2. Use the component.
3. Observe the browser console for CSP errors related to a blocked data: URI.

Expected Behavior

The mat-progress-bar component should render without violating a strict CSP that disallows data: URIs for images. The v14 approach of injecting an inline element into the DOM was ideal, as it did not require any changes to img-src.

Actual Behavior

The component attempts to load a background-image with a data: URI, violating the CSP and preventing the buffer animation from rendering.

Environment

• Angular: 20.1.7
• CDK/Material: 20.1.6
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): TuxedoOS (Ubuntu 24.04 based) and Windows 10