Skip to content

Html picture element attempts to display svg images in "safest" security level when fallbacks are available

Summary

The html <picture> element allows the webpage to specify multiple versions of an image as <source> elements so that the browser can choose an image that is compatible with the browser. This is useful for web developers who wish to add a fallback image if one of the image formats is not supported. Since Tor Browser does not display svg images at the "safest" security level, I think the browser should not attempt to load an svg image in a <source> element and should instead fall back to another resource. Currently, Tor Browser shows a "broken image" icon.

This would be useful in Tor Browser so that web developers can fall back to jpg/png when the browser has svg images disabled. This makes for a nicer experience for Tor Browser users using the "safest" security level, and is more in line with how other image formats work like webp.

MDN:

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

This [<source>] element is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.

To decide which URL to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.

type

Specifies the MIME media type of the image or other media type, optionally including a codecs parameter.

Steps to reproduce:

Set the browser security level to "safest".

<picture>
    <source srcset="/foo.svg" type="image/svg+xml">
    <img src="/foo.png">
</picture>

What is the current bug behavior?

Tor Browser shows the "broken image" icon.

What is the expected behavior?

I would expected Tor Browser to not have tried to display the "image/svg+xml" resource if svg is disabled. Instead it should have displayed the png image.

Environment

OS: Ubuntu 22.04 Tor Browser: 13.0.13

To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information