Medium embed.ly notifyResize не работает в Safari

Question

Проблема

Мы oEmbed провайдер для embed.ly , который интегрирован на medium.com для отображения виджетов в статьях.Embed.ly предоставляет API управления высотой , который позволяет iFrame изменять свой размер изнутри.Это работает, и все еще работает во всех браузерах, кроме Safari.Который теперь выдает ошибку:

SecurityError: Заблокирован фрейм с источником "https://medium.com" от доступа к фрейму перекрестного источника. Протоколы, домены и порты должны совпадать.

См. Пример здесь: https://medium.com/climateaction/its-time-to-challenge-instagrams-climate-footprint-e15c67bc2b7c

Обновление 2019-07-10

medium.com , очевидно, что-то изменило. Теперь:

1. Описанная ошибка не возникает при открытии ссылки напрямую * yaeeehi *
2. По-прежнему возникает при переходе с страницы обзора и клик по статье * buuhhhh *
3. Появилась новая ошибка, теперь встраивается в пользовательских доменов вообще не работает * arg *

Отказался отображать 'https://medium.com/media/c31b8b0f7cb609aaf60d13f46e3777bf' в кадре, поскольку для параметра' X-Frame-Options 'установлено значение' sameorigin '.

Теперь есть двойная полоса прокрутки для встраивания в Windows / Mac Mojave / ... + Chrome / Safari /...

Подробное описание

Интеграция выполняется следующим образом:

1. Статья medium.com включает medium.com / media / ... iFrame :

    <iframe data-width="620" data-height="500" width="350" height="282" data-src="/media/1389b69a290289ae20aedd68efce0d4b?postId=e15c67bc2b7c" data-media-id="1389b69a290289ae20aedd68efce0d4b" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fposixion.com%2Fimages%2Flogo.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen="" frameborder="0" src="/media/1389b69a290289ae20aedd68efce0d4b?postId=e15c67bc2b7c">
    </iframe>

Это снова объединяет embedly.com / widgets / ... iFrame , который загружает наш сайт.

Мы вызываем window.parent.postMessageкоторый успешно достигает iFrame medium.com и вызывается функция notifyResize:

function notifyResize(height) {
  height = height ? height : document.documentElement.offsetHeight;
  var resized = false;
  if (window.donkey && donkey.resize)
    {donkey.resize(height); resized = true;}
  if (parent && parent._resizeIframe)
    {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}
  if (window.location && window.location.hash === "#amp=1" && window.parent && window.parent.postMessage)
    {window.parent.postMessage({sentinel: "amp", type: "embed-size", height: height}, "*");}
  if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize)
    {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}
  return resized;
}

Это прерывает parent._resizeIframe - что странно, так как iFrameсодержимое взято из https://medium.com и пытается получить доступ к родителю, который также https://medium.com. Есть какие-либо мысли по этому поводу?

Симуляция

Я попытался повторить ошибку в моей среде, но это работает:

1. Имитация статьи medium.com для: https://test.posixion.com/tests/medium.html
2. Имитация iFrame для: https://test.posixion.com/tests/medium-embed.html
3. Слева встроенная интеграция как есть

Подсказка 1: политика безопасности контента

Возможно, она связана с политикой безопасности контента medium.com:

default-src 'self';
connect-src https://localhost https://*.instapaper.com https://*.stripe.com https://glyph.medium.com https://*.paypal.com https://getpocket.com https://medium.com https://*.medium.com https://*.medium.com https://medium.com https://*.medium.com https://*.algolia.net https://cdn-static-1.medium.com https://dnqgz544uhbo8.cloudfront.net https://cdn-videos-1.medium.com https://cdn-audio-1.medium.com https://*.lightstep.com https://*.branch.io https://app.zencoder.com 'self';
font-src data: https://*.amazonaws.com https://*.medium.com https://glyph.medium.com https://medium.com https://*.gstatic.com https://dnqgz544uhbo8.cloudfront.net https://use.typekit.net https://cdn-static-1.medium.com 'self';
frame-src chromenull: https: webviewprogressproxy: medium: 'self';
img-src blob: data: https: 'self';
media-src https://*.cdn.vine.co https://d1fcbxp97j4nb2.cloudfront.net https://d262ilb51hltx0.cloudfront.net https://*.medium.com https://gomiro.medium.com https://miro.medium.com https://pbs.twimg.com 'self' blob:;
object-src 'self';
script-src 'unsafe-eval' 'unsafe-inline' about: https: 'self';
style-src 'unsafe-inline' data: https: 'self';
report-uri https://csp.medium.com

Но нет соответствующего вызова report-uri.

Подсказка 2: отсутствует источник

Интересно также то, что iFraИсточник: https://medium.com/media/1389b69a290289ae20aedd68efce0d4b?postId=e15c67bc2b7c не отображается на вкладке сети веб-разработчика !?Но его все равно можно выбрать как страницу в консоли.

Answer 1

Хорошо, проблема в следующем:

Заблокирован фрейм с источником "https://medium.com" от доступа к рамка с происхождением "https://medium.com". Набор кадров, к которым осуществляется доступ «document.domain» к «medium.com», но кадр, запрашивающий доступ, сделал не. Оба должны установить для «document.domain» одно и то же значение, чтобы доступ.

Установка document.domain = "medium.com" в первом iFrame решает проблему. Так что medium / embed.ly должен сделать это .