Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 878700d

Browse files
fix(material/progress-bar): avoid CSP issues due to buffer dots (#31818)
Currently the way we render the buffer dots in the progress bar is by using a `data:` URL with an inline SVG. The problem with this approach is that it can trigger CSP errors and require users to allow all `data:` URLs, even if they don't use the buffer mode. These changes work around the issue by rendering the dots using a radial gradient instead. Fixes #31808.
1 parent c832533 commit 878700d

File tree

1 file changed

+7
-8
lines changed

1 file changed

+7
-8
lines changed

‎src/material/progress-bar/progress-bar.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use '@angular/cdk';
22
@use './m3-progress-bar';
33
@use '../core/tokens/token-utils';
4-
@use '../core/style/vendor-prefixes';
54

65
$fallbacks: m3-progress-bar.get-tokens();
76

@@ -104,18 +103,18 @@ $fallbacks: m3-progress-bar.get-tokens();
104103
}
105104

106105
.mdc-linear-progress__buffer-dots {
107-
$mask: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' " +
108-
"xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' " +
109-
"enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' " +
110-
"preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E";
111-
112-
@include vendor-prefixes.mask-image(url($mask));
106+
$circle-color: token-utils.slot(progress-bar-track-color, $fallbacks);
107+
$circle-size: calc(#{token-utils.slot(progress-bar-track-height, $fallbacks)} / 2);
108+
background-image: radial-gradient(circle, #{$circle-color} #{$circle-size}, transparent 0);
113109
background-repeat: repeat-x;
110+
background-size: calc(#{$circle-size} * 5);
111+
// The `background-position` prevents the animation from jumping around when the progress
112+
// changes. Note that we shouldn't invert it in RTL, because the animation direction is reversed.
113+
background-position: left;
114114
flex: auto;
115115
transform: rotate(180deg);
116116
animation: mdc-linear-progress-buffering
117117
calc(250ms * var(--mat-progress-bar-animation-multiplier)) infinite linear;
118-
background-color: token-utils.slot(progress-bar-track-color, $fallbacks);
119118

120119
@include cdk.high-contrast {
121120
background-color: ButtonBorder;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /