Disqus on an amp page inside an amp-iframe

Question

I try to implement Disqus on an amp document. My idea is to use an amp-iframe which loads a small document which only contains Disqus. I used this amp frame

<amp-iframe width="300" height="300"
            layout="responsive"
            sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-scripts"
            resizable
            frameborder="0"
            seamless
            src="/disquss/name-of-blog-post">
    <div overflow tabindex=0 role=button aria-label="Read more">more!</div>
</amp-iframe>

However, chrome throws a content security policy violation:

Refused to load the script 'https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js' because it violates the following Content Security Policy directive: "script-src https://.twitter.com: https://api.adsnative.com/v1/ad.json *.adsafeprotected.com https://cas.criteo.com/delivery/0.1/napi.jsonp .services.disqus.com: http://referrer.disqus.com/juggler/ disqus.com http://.twitter.com: a.disquscdn.com https://referrer.disqus.com/juggler/ https://.services.disqus.com: *.moatads.com 'unsafe-eval' https://mobile.adnxs.com/mob https://ssl.google-analytics.com".

So basically, chrome does not load https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js even though a.disquscdn.com is allowed. This restriction comes from an iframe disqus uses. This isn't a problem when I use a native sandboxed <iframe> instead of an <amp-iframe>.

I'd liked to create an example but because of the iframe construct i can't simply create a jsfiddle.

Barry Pollard Barry Pollard · Accepted Answer · 2015-12-30T11:34:41

It appears to be an instance of this bug: https://code.google.com/p/chromium/issues/detail?id=541221

The same thing does happen with a standard iframe if using the sandbox attribute.

Adding allow-same-origin to your sandbox definition seems to fix it. I notice it's the same in Firefox now too despite the comment in that bug (though firefox doesn't list the error as explicitly) that it works there. So maybe this is how it's supposed to work? Can't say I know enough about the sandbox attribute to tell you that.

However, as an aside, I'm not sure this is such a great idea anyway. Will you be having a non-AMP version of this page? Personally I don't see the case for an AMP only page as I think this limits you since 1) not everything is possible in AMP and 2) some clients won't load this (e.g. if no javascript, or doesn't understand AMP), so I prefer to have a real HTML page too. However if you do have separate HTML and AMP pages then they will track comments separately (unless you load your non-AMP page into this iframe and somehow hide everything but the comments - but that seems a complete waste!).

So the way I implement this at present is to add a "click here to view comments" link to my AMP pages which take them to the full page - with comments. Not a great solution but at least keeps comments together.

Disqus on an amp page inside an amp-iframe

1 Answers