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