1965469 - Emit warning/error message for CORS blocked mask-image

Status: RESOLVED FIXED

(Core :: Networking, defect, P2)

Description

[Dragoon Aethis]

Attachment: FirefoxMaskImageOriginExample.zip

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Steps to reproduce:

On a local (file://) page, created a div element with a background image and a CSS mask-image. (Attached the minimal example to showcase this. Running it from file:// and a local server produces different results.)

Actual results:

Because mask-image requires a valid CORS origin, the element showed up completely blank (no background, no masked bits visible). Disabling the mask shows the element's background just fine.

No warnings are produced in dev tools. In the dev tools inspector, when hovering over the mask image URL resource, the mask shows up.

Expected results:

A warning should be produced in the console/network/inspector that a resource was blocked due to mask-image's CORS requirements - as documented here: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image - so that the developer knows the mask-image requires a web server to work. Currently, it just leaves one confused staring at a blank div.

(As an aside, this requirement makes no sense. Why is background-image allowed to load resources from the local file system, but mask-image is not?)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:emilio, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

(In reply to Dragoon Aethis from comment #0)

(As an aside, this requirement makes no sense. Why is background-image allowed to load resources from the local file system, but mask-image is not?)

https://drafts.fxtf.org/css-masking-1/#priv is why. I agree tho that a warning here would be in order.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Same happens with <img crossorigin=anonymous src="mask.png"> so not CSS. But I think I tracked it down.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1965469 - Try harder to get a window ID for a request. r=#necko-reviewers

The warning was being logged to the browser console, rather than the web
console. Use the load info to get the right window ID if available.

Do you know of which test would be good to extend for this?

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

Do you know of which test would be good to extend for this?

There's this console test where we check CORS errors: https://searchfox.org/mozilla-central/source/devtools/client/webconsole/test/browser/browser_webconsole_cors_errors.js

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6141d2f271f1
Try harder to get a window ID for a request. r=necko-reviewers,devtools-reviewers,valentin,nchevobbe

Comment 7

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/6141d2f271f1