中号embed.ly notifyResize在Safari上不起作用

Question

问题

我们是oEmbed的embed.ly提供者，该提供者集成在medium.com中以显示文章中的小部件。 Embed.ly提供了height control 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. 直接打开the link时不会发生所描述的错误* yaeeehi *
2. 当它来自an overview page并单击文章时，它仍然会发生* buuhhhh *
3. 有一个新错误，现在嵌入custom domains上根本无效* arg *

  

拒绝在帧中显示“ https://medium.com/media/c31b8b0f7cb609aaf60d13f46e3777bf”，因为它将“ X-Frame-Options”设置为“ sameorigin”。

1. 现在在Windows / Mac Mojave / ... + Chrome / Safari / ...中有一个用于嵌入的双滚动条。

详细说明

集成如下：

1. medium.com article集成了一个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>

1. 这再次集成了一个embedly.com/widgets/... iFrame来加载我们的网站。

2. 我们成功调用到了medium.com iFrame的window.parent.postMessage，并调用了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的 content-security-policy 有关：

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：缺少来源

有趣的是，iFrame来源：https://medium.com/media/1389b69a290289ae20aedd68efce0d4b?postId=e15c67bc2b7c 没有出现在webdeveloper的“网络”标签中 ！！但是它仍然可以在控制台中作为页面选择。

Answer 1

好的，问题是这样的：

  

阻止了原点为“ https://medium.com”的框架访问   原点为“ https://medium.com”的框架。被访问的帧设置   从“ document.domain”到“ medium.com”，但是请求访问的框架确实   不。两者都必须将“ document.domain”设置为相同的值以允许   访问。

在第一个iFrame中设置document.domain = "medium.com"可解决此问题。因此 medium / embed.ly必须这样做。