在amp-iframe内的amp页面上显示Disqus [英] Disqus on an amp page inside an amp-iframe

问题描述

我尝试在amp文档上实现Disqus.我的想法是使用 amp-iframe 会加载一个仅包含Disqus的小文档.我用了这个耳放架

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>

但是，chrome违反了内容安全政策:

However, chrome throws a content security policy violation:

拒绝加载脚本 ' https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js ' 因为它违反了以下内容安全策略"指令: "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'不安全评估' https://mobile.adnxs.com/mob https://ssl.google-analytics.com ".

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".

因此，基本上，即使允许a.disquscdn.com，Chrome也不会加载https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js.此限制来自iframe disqus的使用.当我使用本地沙箱<iframe>而不是<amp-iframe>时，这不是问题.

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>.

我想创建一个示例，但是由于iframe的构造，我不能简单地创建一个jsfiddle.

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

推荐答案

它似乎是此错误的一个实例: https://code.google.com/p/chromium/issues/detail?id=541221

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

如果使用沙箱属性，在标准iframe中也会发生相同的事情.

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

在沙箱定义中添加allow-same-origin似乎可以解决此问题.尽管该错误中有注释(尽管firefox并未明确列出该错误)，但我仍然注意到它在Firefox中也可以正常工作.因此，也许这就是它应该如何工作的?不能说我对sandbox属性了解得足够多.

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.

但是，顺便说一句，我不确定这是否是一个好主意.您将拥有此页面的非AMP版本吗?就我个人而言，我看不到仅适用于AMP的页面的情况，因为我认为这限制了您，因为1)并非AMP中的所有功能都可以，以及2)一些客户端不会加载此内容(例如，如果没有JavaScript或不理解AMP )，因此我也希望拥有一个真正的HTML页面.但是，如果您确实有单独的HTML和AMP页面，则它们将分别跟踪注释(除非您将非AMP页面加载到此iframe中，并且以某种方式隐藏除注释之外的所有内容-但这似乎完全是浪费！).

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!).

因此，我目前的实现方式是在我的AMP页面上添加一个单击此处查看评论"链接，从而将其带到整页-包含评论.这不是一个很好的解决方案，但至少可以将注释保持在一起.

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.

这篇关于在amp-iframe内的amp页面上显示Disqus的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！