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

概述我尝试在放大器文档上实现Disqus.我的想法是使用 amp-iframe 它加载一个只包含Disqus的小文档.我使用了这个放大器框架 <amp-iframe width="300" height="300" layout="responsive" sandbox="allow-forms allow-modals allow-popups all 我尝试在放大器文档上实现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
‘07001’
because it violates the following Content Security Policy directive:
“script-src https://.twitter.com:
07002 *.adsafeprotected.com
07003 .services.disqus.com:
07004 disqus.com http://.twitter.com:
a.disquscdn.com 07005
https://.services.disqus.com: *.moatads.com ‘unsafe-eval’
07006 07007″.

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

我想创建一个例子,但由于iframe结构,我不能简单地创建一个Jsfiddle.

解决方法@H_301_45@ 它似乎是这个BUG的一个例子：
https://code.google.com/p/chromium/issues/detail?id=541221

如果使用sandBox属性,标准iframe也会发生同样的事情.

将allow-same-origin添加到沙箱定义似乎可以解决它.我注意到它在firefox中也是一样的,尽管该BUG中的注释(尽管firefox没有明确列出错误)它在那里工作.那也许这就是它应该如何工作？不能说我对沙箱属性的了解足以告诉你.

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

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

总结

以上是内存溢出为你收集整理的在amp-iframe内的放大器页面上的Disqus全部内容，希望文章能够帮你解决在amp-iframe内的放大器页面上的Disqus所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。