web kit mask image throws a cors error angular

Question

I see some answers on StackOverflow but it is difficult to understand and I have also tried to sanitize it but the issue is the same. https://stackoverflow.com/a/61984516/4646531

Access to image at 'https://mdn.mozillademos.org/files/12676/star.svg' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

<div [ngStyle]="{'-webkit-mask-image': 'url(https://mdn.mozillademos.org/files/12676/star.svg)'}">
  yo! This text is contained within a <code>P</code> tag.
</div>

Code on stackblitz

Answer 1

A small point in addition to the other answers.

Yes, you're getting hit by a CORS error, and unless you control the server, it's unlikely that you'll be able to get around it (http requesting https).

The reason why though, is because you're using it as a mask.

If you embed a simple image:

<img src="https://mdn.mozillademos.org/files/12676/star.svg">

There's no problem, no error.

Because you're using it as a mask though, the browser has to access the pixels themselves, so you jump to a higher security check.

It's a little similar to the no-cors property of a fetch request: https://developer.mozilla.org/en-US/docs/Web/API/Request/mode - just using the image is the equivalent of no-cors (just showing it), whereas using it as a mask is the equivalent of needing the Response, so now you have to go through all the CORS hoops.

Most likely related: https://bugs.chromium.org/p/chromium/issues/detail?id=786507