HTMLのpostMessage()でクロスドキュメントメッセージを送信する方法

クロスドキュメントメッセージングとは

HTMLでは、新しいiframe要素や新規ウィンドウを作成することで、別のWebブラウジングコンテキストを生成できます。こうした異なるコンテキスト間で安全にデータをやり取りするために使われるのが、postMessage()メソッドです。

postMessage()の2つの引数

postMessage()メソッドには、以下の2つの引数を指定します。

• message： 送信したいメッセージ本体（文字列やオブジェクトなど）
• targetOrigin： メッセージの送信先となるオリジン名（例：https://example.com）

実装例：ボタンクリックでiframeにメッセージを送信する

次の例では、ボタンがクリックされたタイミングで、iframe内のウィンドウへメッセージを送信しています。

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function(){
  iframe.contentWindow.postMessage('送信するメッセージです。', 'https://www.tutorialspoint.com');
}
button.addEventListener('click', clickHandler, false);

コードのポイント

• document.querySelector('iframe')で対象のiframe要素を取得します。
• iframe.contentWindow.postMessage()を呼び出すことで、iframe内のウィンドウにメッセージを送れます。
• 第2引数のtargetOriginを正しく指定することで、意図しないドメインへの情報漏洩を防止できます。

メッセージを受信する側の実装

受信側では、messageイベントをリスナーとして登録します。

window.addEventListener('message', function(event) {
  // 送信元オリジンの検証
  if (event.origin !== 'https://www.tutorialspoint.com') return;
  console.log('受信したメッセージ:', event.data);
}, false);

event.originによる送信元チェックを行ってからevent.dataを処理すれば、セキュリティリスクを抑えつつ、安全なクロスドキュメント通信を実現できます。