Question

我尝试在放大器文档上实现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'unsafe-eval' https://mobile.adnxs.com/mob https://ssl.google-analytics.com“。

所以基本上，即使https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js被允许，chrome也不会加载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中也是一样的，尽管该bug中的注释（尽管firefox没有明确列出错误）它在那里工作。那也许这就是它应该如何工作？不能说我对沙盒属性有足够的了解告诉你。

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

所以我目前实现这一目的的方法是在我的AMP页面添加一个“点击此处查看评论”链接，将其带到整个页面 - 带有评论。不是一个很好的解决方案，但至少要保持评论。

在amp-iframe内的放大器页面上的Disqus

1 个答案: