Window.postMessage() - メッセージを送信する

2017/10/14

postMessage()は、Windowのメソッドです。別ウィンドウにメッセージを送信します。同一オリジンポリシーの制約を受けないため、受け取る側はセキュリティを考慮しなければいけません。

概要

名前

postMessage

所属

IDL

void postMessage(any message, USVString targetOrigin, optional sequence<object> transfer = []);

仕様書

https://html.spec.whatwg.org/multipage/web-messaging.html#dom-window-postmessage

説明

第1引数(message)には、メッセージの内容を指定します。型は問われません。

第2引数(targetOrigin)には、相手側のオリジンを指定します。ウィンドウとオリジンが一致しない場合、送信は実行されません。相手側のオリジンを限定したくない場合はアスタリスク(*)を指定します。

第3引数(transfer)には、Transferableなオブジェクトを指定します。受信側に権限が移り、送信側では操作できなくなります。

チュートリアル

送信側

postMessage()は、別ウィンドウにメッセージを送信するメソッドです。送信する側は、メッセージと送り先のオリジンを指定します。下記の例では、インラインフレームで開いたウィンドウ宛てに送ります。これは、"https://example.com"というオリジン上にあるページから、"https://syncer.jp"というオリジン上にあるページにメッセージを送信する例です。第2引数にオリジンを指定した場合、ウィンドウ(targetWindow)のオリジンと一致しない場合には送信を実行できません。

<iframe id="hoge" src="./other-page.html"></iframe>

// iframe要素のウィンドウを取得する
var targetWindow = document.getElementById( "hoge" ).contentWindow ;	// Window

// このウィンドウから、相手のウィンドウ(targetWindow)に向けてメッセージを送信する (オリジンを指定)
targetWindow.postMessage( "Hello!!", "https://syncer.jp" ) ;

// 送り先のオリジンが分からない場合は、第2引数をアスタリスクにする (非推奨)
// targetWindow.postMessage( "Hello!!", "*" ) ;

受信側

受信側では、メッセージを受け取った時のイベントを用意しておかなくてはいけません。メッセージはどのオリジンから送られてきたのか、確認するようにしましょう。"https://example.com"から送られてくることが予定されているので、それ以外のオリジンから送られてきたメッセージを無視するようにします。

// コールバック関数
var myFunction = function ( event ) {
	// 送信側のオリジン
	var origin = event.origin ;

	// 信頼できるオリジン以外からのメッセージを無視する (重要)
	if( origin !== "https://example.com" ) return false ;

	// 送られてきたメッセージ
	var message = event.data ;	// "Hello!!"
	console.log( "メッセージを受信しました!! → " + message ) ;
}

// イベントを設定する (addEventListener)
addEventListener( "message", myFunction ) ;

// イベントを設定する (onmessage)
// onmessage = myFunction ;

オリジンの指定について

先の例では、送信側と受信側でそれぞれ相手側のオリジンを指定しています。これはセキュリティ上、どういった意味があるのか。例えば、メッセージを受信する側がパスワードのような重要な情報を返す設定になっていると、不明な場所から送られてきたメッセージに反応しないようにした方が安全だということです。そもそもこういった仕組みにおいて重要な情報を取り扱うこと自体が安全ではない、ということも添えておきます。

デモ

Window.postMessage()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
iframe { width: 95% ; }
</style>
</head>
<body>
<p>受信したメッセージ→<span id="hoge"></span></p>
<iframe src="./demo.html"></iframe>
<script>
onmessage = function ( event ) {
	console.log( event ) ;
	var message = event.data ;
	document.getElementById( "hoge" ).textContent = message ;
}

// iframe要素内での処理
// parent.postMessage( message, "*" ) ;
</script>
</body>
</html>