Web Messagingによるメッセージ通信 (2/4)

このWeb Messagingの大きな特徴は「異なるドメインのページともやり取りできる」という点でしょう。あるWebページ内に、別のドメインのページをインラインフレームで埋め込んだりしても、その間でちゃんとメッセージをやり取りできるのです。

が、これは「全然関係ないサイトのページを埋め込んで動かす」ことになるわけですから、全然関係ないところのページを埋め込んで動かしたりするとコトですね。やはり、「このページはどこから持ってきたものなのか」というのをちゃんと確認して処理できるようにしておく必要があります。

その「このページはどこから持ってきたものか」を示す情報が「オリジン」というものです。Web Messagingでは、このオリジンをチェックすることで、特定のドメインからのページのみメッセージを受け付ける、というようなことが行えるようになります。

先にpostMessageについて説明をした時、第２引数に「オリジン」を指定するようになっていたことを思い出してください。このオリジン情報は、onmessageで呼び出される関数の引数に渡されるMessageEventオブジェクトに保管されています。「origin」プロパティの値を取得することで、どのオリジンから送られたメッセージかがわかるのです。

では、先ほどのスクリプトを少し修正してみましょう。inline.htmlの<script>タグ部分を下のリスト欄のように書き換えてみてください。ローカル環境で試すときちんとメッセージを受け取れますそれを確認したら、★マークのオリジンのチェックをいろいろと変更して試してみましょう。オリジンが異なるとメッセージを受け取った後の処理が変わります。

「でも、それならpostMessageの際にオリジンを偽装して送信してきたらどうするんだ？」と思うかも知れません。が、これは（ブラウザの実装にもよるのでしょうが）、postMessageでオリジンを実際のドメインとは異なるものに設定した場合、例外が発生してメッセージが送られないようです。ですから、送信する際に偽装するということはあまり考えなくてもいいようです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※inline.htmlのスクリプト修正

<script type="text/javascript">
window.addEventListener('message', function(event){
	if (event.origin == 'http://localhost'){ // ★このオリジン値をいろいろ変えてみる
		var msg = '受信メッセージ: <br>' + event.data;
		document.querySelector('#msg').innerHTML = msg;
	} else {
		document.querySelector('#msg').innerHTML = '※オリジンが異なります。';
	}
});
</script>