Angular DomSanitizer: Sanitizing Mask-Image Not Working

Question

When providing a background image for an element, everything works fine:

<div [style.background-image]="sanitizedStyleValue"></div>

But how can I provide a mask-image for an element? This:

<div [style.mask-image]="sanitizedStyleValue"></div>

is not working. Also

<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>

does not work. I don't even get a warning in the console.

Is this due to DomSanitizer's ignorance of mask images' right for existance, or is there another way to achieve this?

Context

I want to create an IconComponent where I can Input() an icon name which will be used as part of an url for the mask image. Another Input() holds the background color. This way, I can combine different icons with different colors.

I would like to prevent creating CSS-classes for every possible icon.

Would you be so kind as to tell us what the warning in the console is? A Cors warning maybe? — David
– David, Commented May 24, 2020 at 9:38
Sorry, I misread your post about warnings. Try <div [style.-webkit-mask-image]="sanitizedStyleValue"></div> — David
– David, Commented May 24, 2020 at 10:16

David · Accepted Answer · 2020-05-24 10:19:46Z

2

According to the documentation, for CSS masks to work with chrome, you need to prefix the rules with -webkit-

So this shoud work

<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>

Note: According to W3C recommendations, the images you are using for the mask must be returned with correct CORS headers.

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all , and values on the mask-image, mask-border-source and clip-path properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value none had been specified.

answered May 24, 2020 at 10:19

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skimrande Over a year ago

I can confirm this is working! Tried pretty much everything before that, thanks @David.

Aakash Garg · Accepted Answer · 2020-05-24 09:16:10Z

1

Try this :-

[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"

edited May 24, 2020 at 9:16

answered May 24, 2020 at 8:21

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

2 Comments

uruk Over a year ago

This is the CSS-only approach which would clearly work. But I want to dynamically set the mask image as a custom Input() of an IconComponent. Updated question. But thanky anyway.

Aakash Garg Over a year ago

what is in sanitizedStyleValue ?

Collectives™ on Stack Overflow

Angular DomSanitizer: Sanitizing Mask-Image Not Working

Context

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Context

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related