v152 · HTML · Opt-in Mechanism

Opt-in Mechanism

The responsive sizing feature requires a two-sided opt-in: the embedder adds an attribute to the <iframe> element, and the embedded document signals consent via an HTTP response header. This page compares the old postMessage workaround to the new declarative approach.

Chrome 152 required for the native declarative approach. The postMessage workaround shown on the left works in all browsers today.
Live opt-in probe
Parent attribute support checking
Child response header checking

before & after

Before — postMessage workaround

<!-- Parent page -->
<iframe id="frame" src="child.html"></iframe>

<script>
// Must listen for child's size report
window.addEventListener('message', e => {
  if (e.data?.type === 'resize') {
    document.getElementById('frame')
      .style.height = e.data.height + 'px';
  }
});
</script>

<!-- child.html -->
<script>
// Must report size after every layout change
function report() {
  window.parent.postMessage({
    type: 'resize',
    height: document.body.scrollHeight
  }, '*');
}
new ResizeObserver(report).observe(document.body);
report();
</script>

After — Chrome 152 declarative

<!-- Parent page -->
<iframe src="child.html"
        allow-responsive-sizing>
</iframe>
<!-- No script needed -->



<!-- Server response for child.html -->
HTTP/1.1 200 OK
Content-Type: text/html
Supports-Responsive-Sizing: 1

<!-- child.html -->
<!-- Normal HTML — no script needed -->

how the opt-in works

  1. Embedder adds the attribute. The parent document adds allow-responsive-sizing to the <iframe> element. Without this attribute the browser never propagates content dimensions even if the child opts in.
  2. Embedded document opts in via header. The child document's HTTP response includes Supports-Responsive-Sizing: 1. This prevents third-party content from being resized without consent — a security requirement.
  3. Browser propagates layout overflow. On every layout pass, the browser reads the embedded document's layout overflow size and updates the <iframe> element's box in the parent layout. No script, no flicker.
  4. Works cross-origin. Because the consent is expressed via a server-controlled header, cross-origin iframes that set the header can also participate — something postMessage required careful origin-checking to achieve safely.

security model

The double opt-in prevents frame-squatting attacks where an embedder could resize a third-party iframe to harvest scroll or layout information about that page. Both sides must consent:

see also