この Codelab では、iframe 内のデータをアクセスする際の同一オリジン ポリシーの仕組みについて説明します。
設定: 同一オリジンの iframe を含むページ
このページには、iframe.html
という iframe
が同じオリジンに埋め込まれています。ホストと iframe は同じオリジンを共有するため、ホストサイトは iframe 内のデータをアクセスして、次のような秘密メッセージを公開できます。
const iframe = document.getElementById('iframe');
const message = iframe.contentDocument.getElementById('message').innerText;
クロスオリジン iframe に変更する
iframe
の src
を https://other-iframe.glitch.me/
に変更してみてください。ホストページは引き続き秘密メッセージにアクセスできますか?
ホストと埋め込まれた iframe
のオリジンが同じではないため、データへのアクセスは制限されます。