bug(MatProgressBar): Class, which only works with insecure CSP header, gets applied where not needed

[phil9001]

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

No response

Description

I was unsure if this was a bug, feature request or a security vulnerability, but I decided to put it as a bug. Let me know if I should put it somewhere else.

It appears the class mdc-linear-progress__buffer-dots gets applied to progress bars not in buffer mode, and it appears to have no effect as well. This can be seen in the documentation for the component, where it is applied to both the determinate and indeterminate examples. This is a problem for the project I am working in since that specific class uses data as the source for the mask-image CSS property, which we don't allow because of a strict CSP header policy.

Reproduction

StackBlitz link: Not needed since it can be seen in the documentation, to which I added an url.

Steps to reproduce:

1. Go to: https://material.angular.io/components/progress-bar/overview
2. Check the classes applied to the determinate and indeterminate examples

Expected Behavior

I expect that the buffer specific class isn't applied to not-related progress bars. I also expect that the mask-image property is not set using data

Actual Behavior

The class is applied to multiple progress bars where it does not seem to have an effect and the value set for the mask-image property uses data

Environment

• Angular:17.0.9
• CDK/Material: 17.0.5
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

I'm not super well versed in CSP. Would removing it from the DOM when not in use be enough or do we also have to not include the CSS? If it's only a matter of removing it from the DOM, I can submit #28946.

[phil9001]

It is only when the class is applied that the violation occurs, so it isn't an issue if it is included in the CSS. Unless of course we want to use the progress bar in buffer mode at a later time.

[crisbeto]

In that case I'll continue with #28946. It's not optimal that using buffer would cause a new CSP violation to show up, but currently we don't have much control over how that data: URL gets generated. We may be able to rework this in the future.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}