search

mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.19k stars 509 forks source link

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

Open daiplusplus opened 1 year ago

daiplusplus commented 1 year ago

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?

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.

image

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: https://github.com/mdn/content/commit/7a9f9baa25d9a7313bd6c62ef5ef585b28459c58 * Document last modified: 2023-02-21T06:01:00.000Z
bsmth commented 1 year ago

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

caugner commented 1 year ago

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 https://github.com/mdn/content/pull/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 https://github.com/mdn/yari/pull/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 https://github.com/mdn/yari/pull/9727.
daiplusplus commented 1 year ago

@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...

image

caugner commented 1 year ago

@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 commented 1 year ago

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.