クロスドメインHTML5 iframeの問題とpostMessageによる解決策

クロスドメインiframeの問題とは

HTML5のiframeを利用する際、異なるドメイン間でデータをやり取りしようとすると、ブラウザの「同一オリジンポリシー（Same-Origin Policy）」によってアクセスが制限されます。これはセキュリティ上の重要な仕組みですが、正当な用途で親ページと子ページ（iframe内）の間で通信したい場合には障害となります。

このようなクロスドメイン環境でのデータ転送を実現するには、postMessage()メソッドを使用します。postMessageはHTML5で導入されたAPIで、オリジンが異なるウィンドウ間でも安全にメッセージを送受信できます。

実装例

以下のコード例を参考に、クロスドメインのHTML5 iframe問題を解決してみましょう。

// postMessage() を使用したデータ送信
window.onmessage = function(e) {
    e.source.postMessage(document.body.innerHTML, e.origin);
};

// 受信側の処理
window.onmessage = function(event) {
    alert(event.data);
};

// メッセージ送信の実行
document.getElementById('frame1').contentWindow.postMessage('', '*');

コードの解説

このコードは以下のように動作します。

• window.onmessage: メッセージを受信した際に実行されるイベントハンドラです。受信したメッセージに対して、送信元（e.source）へドキュメントの内容を返信しています。
• e.origin: メッセージ送信元のオリジンを示します。セキュリティのため、返信先は必ず送信元のオリジンに限定しましょう。
• contentWindow.postMessage('', '*'): 指定したIDのiframeのコンテンツウィンドウへメッセージを送信します。第2引数の「*」は任意のオリジンを許可する指定ですが、本番環境では特定のオリジンを明示的に指定することが推奨されます。

注意点

postMessageを使用する際は、セキュリティに十分注意してください。「*」を指定するとすべてのオリジンからの通信を許可してしまうため、機密性の高いデータを扱う場合は、送信先のオリジンを正確に指定し、受信側でもevent.originを検証してからデータを処理することを推奨します。