Disqus на странице amp внутри amp-iframe

Я пытаюсь реализовать Disqus в документе amp. Моя идея - использовать 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>

Однако хром вызывает нарушение политики безопасности контента:

Отказался загрузить скрипт 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 ".

Таким образом, Chrome не загружается https://a.disquscdn.com/next/embed/lounge.load.f3e1717b71e7256da258d3a504e56865.js, хотя a.disquscdn.com разрешен. Это ограничение возникает из-за того, что Disqus использует iframe. Это не проблема, когда я использую "песочницу" <iframe> вместо <amp-iframe>.

Я хотел бы создать пример, но из-за конструкции iframe я не могу просто создать jsfiddle.


amp-html disqus
person Nemo64    schedule 29.12.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Похоже, это экземпляр этой ошибки: https://code.google.com/p/chromium/issues/detail?id=541221

То же самое происходит со стандартным iframe при использовании атрибута sandbox.

Добавление allow-same-origin в определение вашей песочницы, кажется, исправляет это. Я заметил, что сейчас то же самое и в Firefox, несмотря на комментарий в этой ошибке (хотя firefox не указывает ошибку явно), что она там работает. Так, может быть, так оно и должно работать? Не могу сказать, что знаю достаточно об атрибуте песочницы, чтобы сказать вам это.

Однако, в любом случае, я не уверен, что это такая уж хорошая идея. Будет ли у вас версия этой страницы без AMP? Лично я не вижу случая для страницы только AMP, поскольку я думаю, что это ограничивает вас, поскольку 1) не все возможно в AMP и 2) некоторые клиенты не загружают это (например, если нет javascript или не понимает AMP ), поэтому я тоже предпочитаю иметь настоящую HTML-страницу. Однако, если у вас есть отдельные страницы HTML и AMP, они будут отслеживать комментарии отдельно (если вы не загрузите свою страницу без AMP в этот iframe и каким-то образом не скроете все, кроме комментариев - но это кажется пустой тратой!).

В настоящее время я применяю это, добавляя ссылку «щелкните здесь, чтобы просмотреть комментарии» на мои страницы AMP, которые переводят их на полную страницу с комментариями. Не лучшее решение, но, по крайней мере, хранит комментарии.

person Barry Pollard    schedule 30.12.2015
comment
Discuss ожидает параметра с URL-адресом страницы, поэтому разные разделы комментариев не будут проблемой. Также да, я пробую полную страницу amp, просто чтобы проверить. Я попробую добавить этот атрибут песочницы позже, но в последний раз ничего не сделал. Я также добавил атрибут песочницы к обычному iframe, и это сработало (но возможно, что я сделал что-то не так). - person Nemo64; 30.12.2015
comment
allow-same-origin работает, но у amp-iframe есть одно ограничение: они не должны находиться в том же источнике, что и контейнер, если только они не разрешают allow-same-origin в атрибуте песочницы. Я действительно не понимаю, почему это ограничение существует, но если я использую другой домен, то все в порядке. - person Nemo64; 30.12.2015
comment
Да, я тоже не понимаю. Думаю, они хотят, чтобы вы не использовали это как обходной маневр, чтобы притвориться AMP-документом, хотя это не так. Также запутанная формулировка: не используйте одно и то же происхождение, если не установлено allow-same-origin?!? Интересное предложение о передаче правильного URL в Disqus. Должен изучить это больше, поскольку в настоящее время я использую значения по умолчанию, которые получают его из URL-адреса страницы. Возможно, удастся заставить это работать с документом AMP ... - person Barry Pollard; 30.12.2015
comment
Нашел взлом. Браузер не чувствителен к регистру в атрибуте песочницы. amp не является - person Nemo64; 30.12.2015
comment
и никогда никому об этом не рассказывай ???? - person corysimmons; 27.02.2016
comment
Я успешно встроил комментарии Disqus на AMP-страницы и написал здесь инструкции: labs.tomasino. org / disqus-in-amp - person James Tomasino; 28.08.2016