FF 117.0b4: CSP blocks live example with img.src="data:image/svg+xml,base64,"+...

[kkm000]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

What specific section or headline is this issue about?

Color scheme inheritance

What information was incorrect, unhelpful, or incomplete?

The example's in-page JS creates an SVG image with three colored circles and assigns it to img.src property as a data: URI; specifically, in this line of the example:

  img.src="data:image/svg+xml,base64," + btoa("<svg> ... </svg>")

The image fails to load. Instead, the output box shows alt-text only:

Circle
Circle
Circle

An error is logged in the browser's log:

Content-Security-Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml;base64,CiAgICAgIDxzdm… (“default-src”).

Addendum (23-08-11): MS Edge's (v115.0.1901.200) error message is more specific:

Refused to load the image 'data:image/svg+xml;base64,CiAgIC[…]ogICAg' because it violates the following Content Security Policy directive: default-src 'self' https:. Note that img-src was not explicitly set, so default-src is used as a fallback.

The full log of warnings and errors; all but the message above are warnings:

Content-Security-Policy: Ignoring ‘unsafe-eval’ or ‘wasm-unsafe-eval’ inside “script-src-elem”. runner.html
Partitioned cookie or storage access was provided to “https://live.mdnplay.dev/en-US/docs/Web/CSS/@media/prefers-color-scheme/runner.html?id=detecting_a_dark_or_light_theme” because it is loaded in the third-party context and dynamic state partitioning is enabled.
Content-Security-Policy: Ignoring ‘unsafe-eval’ or ‘wasm-unsafe-eval’ inside “script-src-elem”. runner.html
Content-Security-Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml;base64,CiAgICAgIDxzdm… (“default-src”). 3 runner.html:6:6
Partitioned cookie or storage access was provided to “https://live.mdnplay.dev/en-US/docs/Web/CSS/@media/prefers-color-scheme/runner.html?id=color_scheme_inheritance” because it is loaded in the third-party context and dynamic state partitioning is enabled.

I'm a scientist/SWE mainly familiar with HPC C++, with little UI experience, barely able to code a bit of simple HTML and CSS. Fixing this error is way above my pay grade, sorry.

What did you expect to see?

Three colored circles.

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

No response

Do you have anything more you want to share?

Browser: Firefox 117.0b3 (64-bit), beta channel, on Windows 11 v10.0.22621.1992.

MDN metadata

Page report details

• Folder: en-us/web/css/@media/prefers-color-scheme
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/@media/prefers-color-scheme/index.md
• Last commit: mdn/content@c51e059
• Document last modified: 2023-07-05T05:48:35.000Z

[bsmth]

Thanks for reporting @kkm000 - we'll take a look, but you're right about the CSP issue. I wonder if there's a better way to write the example that doesn't B64 encode the images like this.

[kkm000]

@bsmth, Thank you for your quick response! Yes, I vaguely remember that the <svg> element can be used in HTML5 directly, though I'm not betting my arm an the leg on that being true and universally supported by browsers. If true, tho, it feels a better practice to me. An analogy is short-cutting the processing of a chunk of data in memory by dumping it to a temporary file and reusing existing machinery to process it. I was reading the document to figure out how to respect user's dark/bright theme preference properly, so that doesn't apply to my little task. Nevertheless, using the data: URI and base64 encoding struck me as a kinda round-about way of embedding a piece of SVG graphics into the page. In any case, MDN seems the most authoritative guide on the practical use of Web technologies out there, much more thorough, deep and complete than e.g. w3school, so it better remain top-notch.

OTOH, Web programming sometimes looks less than straightforward IRL. I've seen comments like “Don't use X here, it breaks Safari under iOS on small screens.” That's one of these random moments of relief when I feel happy that I'm not writing public Web pages, only simple ones for internal visualisation. But then, I immediately recalled, w.r.t. my own craft, comments in C++ code like “// Don't yank these 'typedef's! They unbreak compilation with MSVC prior to v17.” When you have experience, you know what specs are borked and know the tricks to work around the borkage. This is why I didn't dare trying to fix (or, rather, “fix”) the example. :-)

[spookylukey]

The same issue is breaking the example code on this page: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL - the images do not appear.

In this case it is pretty much impossible to avoid using src="data:...", as that's the whole point of the page.

Tested with both Firefox and Chrome.

[bsmth]

OK thanks for reporting, so either way we need a CSP update (img-src 'self' data:?) to fix this - someone from the Yari team will take a look shortly.