5

我尝试在 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 会引发内容安全策略违规：

拒绝加载脚本“ 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 ”。

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

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

4

1 回答 1

6

它似乎是这个错误的一个实例： 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 页面上添加一个“单击此处查看评论”链接，将它们带到整个页面 - 带有评论。不是一个很好的解决方案，但至少可以将评论放在一起。

于 2015-12-30T11:34:41.057 回答