同一生成元ポリシーと iframe

Mariko Kosaka

この Codelab では、iframe 内のデータをアクセスする際の同一オリジン ポリシーの仕組みについて説明します。

設定: 同一オリジンの iframe を含むページ

このページには、iframe.html という iframe が同じオリジンに埋め込まれています。ホストと iframe は同じオリジンを共有するため、ホストサイトは iframe 内のデータにアクセスし、blow のような秘密メッセージを公開できます。

const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;

クロスオリジン iframe に変更する

iframesrchttps://other-iframe.glitch.me/ に変更してみてください。ホストページはシークレット メッセージに引き続きアクセスできますか?

ホストと埋め込まれた iframe のオリジンが同じではないため、データへのアクセスは制限されます。