问题
我们是 embed.ly 的oEmbed提供商，它集成在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显然改变了一些东西。现在：
拒绝在框架中显示“ https://medium.com/media/c31b8b0f7cb609aaf60d13f46e3777bf ”，因为它将“X-Frame-Options”设置为“sameorigin”。
- 现在有一个双滚动条用于嵌入 Windows/Mac Mojave/... + Chrome/Safari/...
详细说明
集成如下：
- 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&key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen="" frameborder="0" src="/media/1389b69a290289ae20aedd68efce0d4b?postId=e15c67bc2b7c">
</iframe>
这再次集成了加载我们网站的embedly.com/widgets/... iFrame 。
我们调用 window.parent.postMessage 成功到达 medium.com iFrame 并调用 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的父级。对此有什么想法吗？
模拟
我尝试在我的环境中复制错误，但它有效：
- 模拟medium.com文章到：https ://test.posixion.com/tests/medium.html
- 模拟 iFrame 至：https ://test.posixion.com/tests/medium-embed.html
- 左嵌入集成
线索 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 网络选项卡中！？但它仍然可以作为控制台中的页面进行选择。
