CODEWITHSUNDEEP
amp-html
Jrey
Jrey

Reputation: 1638

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

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

Upvotes: 7

Views: 9470

Answers (5)

Ben Miller
Ben Miller

Reputation: 19

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"

Upvotes: 0

Rohit Ambre
Rohit Ambre

Reputation: 961

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.

Upvotes: 2

Improv
Improv

Reputation: 307

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.

Upvotes: -1

Miroslav Pashaliski
Miroslav Pashaliski

Reputation: 27

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.

Upvotes: -1

ade
ade

Reputation: 4074

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

Upvotes: 12

Related Questions