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 can solve this by removing the "allow-same-origin" attribute from the sandbox. However, you will need to modify your Header and set "access-control-allow-origin" to "*", because your browser will detect your origin as null due to removing the property from the sandbox.