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

Periotic

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

Sang

Thank you for your answer ade. I will test on monday. – Periotic

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.

Breakfast

Removing allow-same-origin from sandbox helped me. Thanks – Mccollum

Answer 3

You need to setup a subdomain on your existing domain, and point the iframe to that instead. Even if you are using "allow-same-origin" it will not work otherwise.

So setup a subdomain "scripts" which gives you https://scripts.example.com

The src attribute would then change to src="https://scripts.example.com/scripts/app.js"

Cambridgeshire

Answer 4

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.

Quianaquibble

Answer 5

Just remove allow-same-origin from sandbox="allow-same-origin allow-forms allow-scripts". Then you can serve your iframed content from the same origin as the AMP page.

Haematoblast