Disqus Iframe not resizing on AMP installation

Question

I'm trying to integrate Disqus on a Hugo theme I'm working on which uses AMP.

I've followed the recommended installation guide so my amp-iframe has allow-same-origin value on the sandbox attribute and the src url is from a different domain.

My code for the iframe:

<amp-iframe width=600 height=180
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://subdomain.asur.dev#code">

    <div overflow
        tabindex=0
        role=button
        aria-label="Load more"
        style="display:block;font-size:12px;font-weight:500;font-family:Helvetica Neue, arial, sans-serif;text-align:center;line-height:1.1;padding:12px 16px;border-radius:4px;background:rgba(29,47,58,0.6);color:rgb(255,255,255)">
        Load more
    </div>
</amp-iframe>

My embed code:

<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize' || msg.name === 'rendered') {
            window.requestAnimationFrame(() => {
                window.parent.postMessage({
                sentinel: 'amp',
                type: 'embed-size',
                height: msg.data.height
                }, '*');
            });
        }
    }
}
</script>
<script>
    var disqus_config = function () {
        this.page.url = window.location;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://shortname.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

I'm not really sure if this is a bug or I'm doing something wrong, but the amp-example on iframe resizing works fine, so my browser is working.

Here, at the end of the page you can find an example of the iframe: https://asur.dev/en/amperage/theme-kitchen-sink/

Answer 1

I have found the problem. I was making a redirect from a subdomain subdomain.asur.dev to a page in the main domain like asur.dev/something.

It looks like the initial AMP validation of the iframe passes and everything works fine, with no errors, but due to internal logic in the component the iframe is not able to resize.

The issue was solved when I moved the embed HTML to a completely independent subdomain with no redirects.