amp-iframe 内的 amp 页面上的 Disqus

Question

我尝试在 amp 文档上实现 Disqus。我的想法是使用 amp-iframe
它加载一个只包含 Disqus 的小文档。我用过这个放大器框架

<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 会引发内容安全策略违规:

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

所以基本上，chrome 不会加载 https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js即使 a.disquscdn.com被允许。此限制来自 iframe disqus 的使用。当我使用原生沙盒时，这不是问题 <iframe>而不是 <amp-iframe> .

我想创建一个示例，但由于 iframe 结构，我不能简单地创建一个 jsfiddle。

Answer 1

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

同样的事情 如果使用沙箱属性，则使用标准 iframe 会发生。

添加 allow-same-origin到您的沙箱定义似乎可以解决它。我注意到它现在在 Firefox 中也是一样的，尽管该错误中的评论(尽管 Firefox 没有明确列出错误)它在那里工作。所以也许这就是它应该如何工作？不能说我对沙箱属性的了解足以告诉您这一点。

然而，顺便说一句，我不确定这是否是一个好主意。您将拥有此页面的非 AMP 版本吗？就我个人而言，我不认为仅 AMP 页面的情况，因为我认为这会限制您，因为 1) 在 AMP 中并非一切皆有可能，2) 某些客户端不会加载它(例如，如果没有 javascript，或者不了解 AMP )，所以我也更喜欢有一个真正的 HTML 页面。但是，如果您确实有单独的 HTML 和 AMP 页面，那么它们将分别跟踪评论(除非您将非 AMP 页面加载到此 iframe 中并以某种方式隐藏除评论之外的所有内容 - 但这似乎完全是浪费!)。

因此，我目前实现的方法是向我的 AMP 页面添加一个“单击此处查看评论”链接，将它们带到完整页面 - 带有评论。不是一个很好的解决方案，但至少将评论放在一起。