AMP: Origin of <amp-iframe> must not be equal to container

Question

I want to solve this problem in my first AMP project,

This is the problem that I have:

error.js:58:

Origin of <amp-iframe> must not be equal to container

This is my amp-iframe code in my index.html:

<amp-iframe
    width=100
    height=100
    layout="nodisplay"
    sandbox="allow-same-origin allow-forms allow-scripts"
    src="https://www.example.com/scripts/app.js">
</amp-iframe>

when I navigate the console tab, this is what I have:

Powered by AMP ⚡ HTML – Version 1462999126709

AMP validation successful.

I used <amp-iframe> to use external javascript, my custom.js

Answer 1

The problem is that you're trying to amp-iframe content that's on the same origin as the AMP. That's forbidden for security reasons (mostly to do with the way the same-origin policy uses synthetic origins inside iframes).

The fix is to make sure that external JS is served from a different origin to your AMP. So if your AMPs are on example.com then you should serve the iframed JS from SOMEOTHERORIGIN.example.com

Answer 2

You may try removing allow-same-origin from sandbox="allow-same-origin allow-forms allow-scripts" but in some cases it creates new errors.

other possible fix is to make sure that external JS is served from a different origin to your AMP. So if your AMPs are on example.com then you should serve the iframed JS from SOMEOTHERORIGIN.example.com.

If both above fix are not working as you have iframe source from your own domain i suggest you can try As amp suggests at - https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md

'One can easily circumvent AMP's not-same-origin-enforcement through redirects, since only the initial URL is tested'.

To get a redirect i tried using url generated from tinyURL site. I created a tinyURL of my url and placed in src of amp-iframe and it's working. It's act as kind of redirect.