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

Answer 2

I'm getting the same problem, but I can use the image as a background-image but not a mask-image.

It's the same image, cors blocked it only on the mask-image Attribute and not the background-image Attribute.

But to complicate matters, the image is on the same domain however the page is an iframe for others to embed on various websites.

Answer 3

The issue is not the same in the thread you included. Over there the problem was not CORS related although CORS was mentioned in the accepted answer.

This part:

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

I'm not sure whether you can make the resource you are trying to use to allow you to use that image in mask-image. There seem to be some security restrictions on stuff like svg, canvas, mask ...

This here is the same image, but it has access-control-allow-origin headers so that works.

https://mdn.github.io/css-examples/masking/star.svg

Answer 4

Although the question has lot of terms, the main cause boils down to the browser's security feature to check the Host willingness for Cross Origin Resource Sharingwith Origin. Not only image, any resource (js, css, html...etc) if you are trying to access from another origin then from where you got your base file the browser examines for Acess-Control-Allow-Origins header in the response. The response is delivered to your web app only if the previously said header has your domain or wildcard (*)

The problem gets little more tricky if you try to use unsafe Http Methods or Http Request Headers. Find out what are safe requests here. Browser triggers a pre-flight, for which server should send a valid response allowing the Method in Access-Control-Request-Method and any unsafe headers in Access-Control-Request-Headers. Their response equivalents are Access-Control-Allow-Methods and Access-Control-Allow-Headers, respectively.

Your case, seems to have no pre-flight as you are making a simple GET call. Only options you have is to find other Host that supports CORS policy or get the image under same server context (localhost:4200 in your case). This is a good article to read if you want to find more about CORS.

Answer 5

This problem can be solved by installing this chrome extension (Assuming you are using chrome)

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

After adding this extension, Click on the extension icon => Click on Open Options page => Select the Access-Control-Request-Headers

If you want to know more about this extension =>

https://mybrowseraddon.com/access-control-allow-origin.html

Answer 6

You can try to setup Angular proxy.

1 - create a file proxy.conf.js at the root of your angular app with the following :

    const PROXY_CONFIG = [
     {
     context: ["/files"],
     target: "https://mdn.mozillademos.org",
     secure: false,
     logLevel: "error",
     changeOrigin: true,
    }
   ];
   module.exports = PROXY_CONFIG;

2 - for Angular 12 in angular.json in projects -> yourprojectname -> architect -> serve ->configurations -> development, add "proxyConfig": "proxy.conf.js"

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            },
            "development": {
              "browserTarget": "client:build:development",
              "proxyConfig": "proxy.conf.js"
            }
          },

2 bis : for Angular < 12 in angular.json in projects -> yourprojectname -> architect -> serve ->options , add "proxyConfig": "proxy.conf.js"

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "yourprojectname:build",
            "proxyConfig": "proxy.conf.js"
          },

3 - in your code, set

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