問題
私たちは、embed.ly へのoEmbed プロバイダーであり、記事にウィジェットを表示するために medium.comに統合されています。Embed.ly は、iFrame のサイズを内側から変更できる高さ制御 APIを提供します。これは機能しており、Safari を除くすべてのブラウザーで引き続き機能します。エラーがスローされるようになりました：
SecurityError: オリジンが " https://medium.com " のフレームがクロスオリジン フレームにアクセスするのをブロックしました。プロトコル、ドメイン、およびポートが一致する必要があります。
ここで例を参照してください: https://medium.com/climateaction/its-time-to-challenge-instagrams-climate-footprint-e15c67bc2b7c
2019-07-10 更新
medium.comは明らかに何かを変えました。今：
- 直接リンクを開いた場合は記載のバグは発生しません* yaeeehi *
- 概要ページから記事をクリックすると、まだ発生します* buuhhhh *
- 新しいバグがあり、カスタム ドメインへの埋め込みがまったく機能しなくなりました * arg *
「X-Frame-Options」が「sameorigin」に設定されているため、 「 https://medium.com/media/c31b8b0f7cb609aaf60d13f46e3777bf 」をフレームに表示することを拒否しました。
- 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>
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である親にアクセスしようとするため、奇妙です。これについて何か考えはありますか？
シミュレーション
私の環境でエラーを複製しようとしましたが、うまくいきます：
- シミュレートされた 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 のネットワーク タブに表示されないことです!? ただし、コンソールでページとして選択することはできます。
