[css-images-4] object-* properties and the iframe element

[tabatkins]

Internal google security review of the object-overflow property led them to ask about how this works on iframes; the reviewers were concerned about the possibility of iframes drawing outside of their bounds when object-view-box or object-fit caused them to be larger than the content box of the element.

This seems like a very reasonable concern to me, and I think the use-case for iframes drawing outside their bounds is of minimal usefulness (especially compared to the intended use-case, images). I propose that we require iframe { object-overflow: clip !important; } in the UA stylesheet.

It's possible we should restrict all the object-* properties to their initial values on iframes, as a cautionary measure. Do others have thoughts on this?

[khushalsagar]

+1 to ignoring object-overflow, there is a clear security reason for it.

For object-view-box, technically we could use a subset of the iframe's document as the content for the iframe but I'm not sure what the use-case would me. I naively thought the spec text (as written) would already makes it so object-view-box doesn't apply. It requires the content of the replaced element to have a natural/intrinsic size. And iframes shouldn't have an intrinsic size, the embedded document is sized to match the iframe's content box.

But it looks like the above is the case for Firefox/Chrome but not Safari. object-fit and object-position on an iframe are currently a no-op in both except safari.

[tabatkins]

Ah right, indeed object-view-box won't apply. object-position will; it moves the contents around after the concrete object size has been determined, so it doesn't rely on having intrinsic sizes. object-fit is technically applies, but when you chase the definitions you find that all values have the same effect as 'fill' when the object doesn't have intrinsic sizes, so in practice it doesn't apply.

Okay, so then that simplifies things; this issue is solely about object-overflow, then.

[dholbert]

FWIW: if there are security concerns & restrictions-needed for iframe, then it's probably worth considering embed and object at the same time.

Those are both replaced elements where these new object-* properties would presumably apply, where existing object-fit and object-position definitely have an effect (at least when pointed at an image file), per https://wpt.fyi/results/css/css-images/object-fit-contain-png-001e.html and https://wpt.fyi/results/css/css-images/object-fit-contain-png-001o.html .

And of course: like iframe, these replaced elements can view HTML content, as shown by e.g.:

data:text/html,<embed src="https://example.org">

data:text/html,<object data="https://example.org">

[tabatkins]

I always forget those elements exist, but yes, they're in the exact same bucket as iframe.

[annevk]

Also frame (although that might be harder to exploit at the moment given that frameset elements have custom layout). And potentially svg:foreignObject?

[khushalsagar]

Does this property need to apply to svg? The implementation in Chrome/Safari doesn't respect any of the existing object* properties (object-fit/object-position) on an inline svg :

<svg style="border: 1px solid black; width: 200px; height: 200px; object-position: 10px 10px;">
  <rect width="200" height="200" fill="blue"></rect>
</svg>

And the overflow can already be created using the standard CSS overflow property :

<svg style="border: 1px solid black; width: 200px; height: 200px; overflow: visible;">
  <rect x="100" y="100" width="200" height="200" fill="blue"></rect>
</svg>

[css-meeting-bot]

The CSS Working Group just discussed [css-images-4] object-* properties and the iframe element, and agreed to the following:

• RESOLVED: Force iframe/object/embed/any other scriptable document-embedding element to object-overflow: clip !important; via UA rule

The full IRC log of that discussion

<fantasai> topic: [css-images-4] object-* properties and the iframe element
<fantasai> github: https://github.com//issues/7143
<fantasai> TabAtkins: When I was discussing the object-overflow property internally, it was brought up in security review that allowing iframes escape the bounds, even if embedding page opts into it, because they can change content arbitrarily via script
<fantasai> TabAtkins: use cases for this seem fairly minimal
<fantasai> TabAtkins: main use case for this property was to allow images to be larger than their content bounds
<fantasai> TabAtkins: iframes don't make as much sense
<fantasai> TabAtkins: so go ahead and enforce that iframes always stay clipped, with UA !important rule
<fantasai> TabAtkins: Other HTML elements were also brought up, e.g. embed, object, ??, and I'm not sure about SVG foreignObject
<chris> foreignObject is basically an iframe
<Rossen_> q?
<fantasai> TabAtkins: Proposal is to force iframe object embed and any other HTML or SVG elements that can be scriptable to clip via UA !important rule
<emilio> ack emilio
<fantasai> smfr: Can authors override UA !important?
<fantasai> TabAtkins: no
<chrishtr> proposed resolution sgtm
<fantasai> RESOLVED: Force iframe/object/embed/any other scriptable document-embedding element to object-overflow: clip !important; via UA rule

[tabatkins]

@annevk Can you elaborate on the svg:foreignObject case? foreignObject is treated like an iframe for layout purposes, but it's not embedded content; it's literal in-document dom.

[annevk]

@tabatkins I thought some user agents supported xlink:href on it, but I might well be mistaken (or maybe that got removed).