同一オリジン ポリシーと iframe

Mariko Kosaka
X

この 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 のオリジンが異なるため、データへのアクセスが制限されます。