CSP and other errors reported in the console for CSS mask-type article's EmbedLiveSample iframes

[daiplusplus]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type

What specific section or headline is this issue about?

Both example runner iframes

What information was incorrect, unhelpful, or incomplete?

• Neither examples ("Setting an alpha mask" and "Setting a luminance mask") load in Chrome 114 nor Firefox 114.
• Chrome's browser console reports these errors:

00:01:59.108 runner.html:1 The source list for the Content Security Policy directive 'style-src' contains an invalid source: '"self"'. It will be ignored.
00:01:59.108 runner.html:1 The source list for the Content Security Policy directive 'style-src' contains an invalid source: '"self"'. It will be ignored.
00:01:59.116 runner.html:1 The source list for the Content Security Policy directive 'style-src' contains an invalid source: '"self"'. It will be ignored.
00:01:59.146 mask-type:1 Clear-Site-Data header on 'https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_an_alpha_mask': Unrecognized type: "*".
00:01:59.146 mask-type:1 Clear-Site-Data header on 'https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_an_alpha_mask': No recognized types specified.
00:01:59.146 mask-type:1 Clear-Site-Data header on 'https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_a_luminance_mask': Unrecognized type: "*".
00:01:59.146 mask-type:1 Clear-Site-Data header on 'https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_a_luminance_mask': No recognized types specified.

Firefox's browser console reports these as warnings, not errors, and unlike Chrome, Firefox loads the iframe's content, but doesn't render it: we just see empty white boxes (screenshot below):

00:02:40.479
Content-Security-Policy warnings 2
00:02:40.479 Content Security Policy: Ignoring ‘unsafe-eval’ or ‘wasm-unsafe-eval’ inside “script-src-elem”. [runner.html](https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_a_luminance_mask)
00:02:40.479 Content Security Policy: Couldn’t parse invalid host "self" [runner.html](https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_a_luminance_mask)
00:02:40.531
Content-Security-Policy warnings 2
00:02:40.531 Content Security Policy: Ignoring ‘unsafe-eval’ or ‘wasm-unsafe-eval’ inside “script-src-elem”. [runner.html](https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_an_alpha_mask)
00:02:40.531 Content Security Policy: Couldn’t parse invalid host "self" [runner.html](https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_an_alpha_mask)
00:02:40.538 Partitioned cookie or storage access was provided to “https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_a_luminance_mask” because it is loaded in the third-party context and dynamic state partitioning is enabled.

00:02:40.538 Partitioned cookie or storage access was provided to “https://live.mdnplay.dev/en-US/docs/Web/CSS/mask-type/runner.html?id=setting_an_alpha_mask” because it is loaded in the third-party context and dynamic state partitioning is enabled.

What did you expect to see?

I expected the samples to load.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/mask-type
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/mask-type/index.md
• Last commit: mdn/content@7a9f9ba
• Document last modified: 2023-02-21T06:01:00.000Z

[bsmth]

Thanks for raising this one @daiplusplus - we'll take a look shortly 👍🏻

[caugner]

Thanks again for raising these issues @daiplusplus. 🙏

1. As for the examples not loading, I just verified that the examples now load properly in Firefox 120 (Nightly) and Chrome 117 (Stable). Most likely the examples were fixed by Put syntax examples in the right place content#28070.
2. As for the Clear-Site-Data warning, it appears that the wildcard ("*") was not yet supported in Chrome (as reported here), but support shipped in Chrome 117.
3. As for the style-src warning in Chrome, I can no longer reproduce this in Chrome 117.
4. As for the CSP warning invalid host "self" in Firefox, I can no longer reproduce this in Firefox 120 (Nightly).
5. As for the script-src-elem warning in Firefox, this will be fixed in fix(csp): remove unsafe-eval from script-src-elem #9729 (pending discussion in the team).
6. I noticed an unrelated CSS warning Unexpected token ‘-1’ in media list. in Firefox, which will be fixed in fix(client): avoid CSS warning in Firefox #9727.

[daiplusplus]

@caugner I'm using Chrome 117 and Firefox 117 and while the examples load, they appear differently in Firefox vs Chrome so I'm unsure if I can close this or not...

[caugner]

@daiplusplus Fair point! This looks like a webcompat issue, and at the same time the result doesn't look like a "red square" even though the example code suggests this. 🤔

Let's keep this issue open for now. I will share an update once I heard back from a colleague working on Firefox.

[caugner]

It looks like Chrome does not respect the mask, and the BCD table for the mask property hints at this:

Implemented with the vendor prefix: -webkit-
The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.

Partial support
While the property is recognized, values applied to it don't have any effect.

A similar issue has been reported in the BCD repo.