Search code examples
javascriptiframeamp-html

Resizing an <amp-iframe> using srcdoc?

Is it possible to create a resizable amp-iframe when using the srcdoc attribute? For an amp-iframe to resize, the docs say the following:

  • The amp-iframe must set the allow-same-origin sandbox attribute.
  • The amp-iframe must be defined with the resizable attribute.
  • The amp-iframe must have an overflow child element.
  • The iframe document must send an embed-size request:

Then, dispatch the following event:

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
}, '*');

However, when I try to add the allow-same-origin attribute to my iframe, I get the following error in my console: "allow-same-origin is not allowed with the srcdoc attribute."

That appears to be by design, for security concerns, at least according to the code here, because a srcdoc will not be constrained by cross-origin domain protections.

Does that mean that there's no way to dynamically resize an amp-iframe that's populated via srcdoc?

Am I missing something basic about how to do this?

Solution

  • You're right - resizing via srcdoc is not possible at the moment. If you think it should be OK for resizing to work without allow-same-origin, I'd suggest filing a feature request on Github.