Loading article…
Web メッセージング、またはクロス ドキュメント メッセージングは、WHATWG HTML5ドラフト仕様で導入されたAPIであり、 Web ブラウザでレンダリングされている間、ドキュメントが異なるオリジン、つまりソース ドメイン間で相互に通信できるようにします[ 1 ]。HTML5 より前は、Web ブラウザはセキュリティ攻撃から保護するためにクロス サイト スクリプティングを許可していませんでした。この慣行は、敵対的でないページ間の通信も禁止していたため、あらゆる種類のドキュメントの相互作用が困難でした。[ 1 ] [ 2 ]クロス ドキュメント メッセージングは、基本的なレベルのセキュリティを提供しながら、スクリプトがこれらの境界を越えて相互作用できるようにします。
Messaging API のpostMessageメソッドを使用すると、プレーンテキストメッセージをあるドメインから別のドメインに送信できます。たとえば、親ドキュメントからIFRAMEへ送信できます。[ 3 ]これには、まず作成者がWindow受信ドキュメントのオブジェクトを取得する必要があります。結果として、メッセージは次のように投稿できます。[ 2 ]
受信するメッセージにeventは、以下の属性があります。
data受信メッセージのデータ、つまり実際のコンテンツ。origin– 送信元ドキュメントの発信元。通常、スキーム、ホスト名、ポートが含まれます。パスやフラグメント識別子は含まれません。[ 1 ]source–WindowProxy文書の出所（ソースウィンドウ）を示します。postMessageブロッキング呼び出しではありません。メッセージは非同期で処理されます。[ 4 ]
ドキュメント A を から読み込み、example.netドキュメント B をまたはポップアップ ウィンドウexample.comに読み込んで通信させたいとしますiframe。[ 1 ]ドキュメント A のJavaScriptは次のようになります。
var o = document.getElementsByTagName ( ' iframe' ) [ 0 ]; o.contentWindow.postMessage ( 'Hello B ' , ' http://example.com/ ' ) ;オブジェクトのオリジンcontentWindowは に渡されますpostMessage。これは、origin通信したいドキュメント (この場合はドキュメント B) の と一致している必要があります。そうでない場合、セキュリティ エラーが発生し、スクリプトが停止します。[ 3 ]ドキュメント B の JavaScript は次のようになります。
function receiver ( event ) { if ( event . origin == 'http://example.net' ) { if ( event . data == 'Hello B' ) { event . source . postMessage ( 'Hello A, how are you?' , event . origin ); } else { alert ( event . data ); } } } window . addEventListener ( 'message' , receiver , false );イベントリスナーは、ドキュメント A からメッセージを受信するように設定されています。originプロパティを使用して、送信者のドメインが想定されるドメインであることを確認します。次に、ドキュメント B はメッセージを確認し、それをユーザーに表示するか、ドキュメント A に対して独自のメッセージで応答します。[ 1 ]
発信元チェックが不十分だと、クロスドキュメントメッセージングを使用するアプリケーションにリスクが生じる可能性があります。[ 5 ] 外部ドメインからの悪意のあるコードから保護するために、作成者はorigin属性をチェックして、メッセージを受信すると想定されるドメインからのメッセージが受け入れられることを確認する必要があります。受信データの形式が想定される形式と一致していることも確認する必要があります。[ 1 ]
クロスドキュメントメッセージングのサポートは、 Internet Explorer、Mozilla Firefox、Safari、Google Chrome、Opera、Opera Mini、Opera Mobile、およびAndroidウェブブラウザの最新バージョンで利用可能です。[ 6 ] APIのサポートは、 Trident、Gecko、WebKit、およびPrestoレイアウトエンジンで利用可能です。[ 7 ]