ウェブメッセージング

Webメッセージング、またはクロスドキュメントメッセージングは​​、WHATWG HTML5ドラフト仕様で導入されたAPIであり、ドキュメントがWebブラウザーでレンダリングされている間に、異なるオリジン、またはソースドメイン^[1]を越えて相互に通信できるようにします。HTML5より前のWebブラウザーでは、セキュリティ攻撃から保護するためにクロスサイトスクリプティングが許可されていませんでした。この慣行により、敵対的でないページ間の通信も禁止され、あらゆる種類のドキュメントのやり取りが困難になりました。^{[1] [2]}クロスドキュメントメッセージングにより、スクリプトはこれらの境界を越えてやり取りできるようになり、基本的なレベルのセキュリティが提供されます。

メッセージングAPIのpostMessageメソッドを使用すると、プレーンテキストメッセージをあるドメインから別のドメインに送信することができます。たとえば、親ドキュメントからIFRAMEに送信できます。[ ^3]これには、作成者が最初に受信ドキュメントのオブジェクトを取得する必要がありますWindow。その結果、メッセージは次の場所に投稿できます。^[2]

• 送信者ドキュメントのウィンドウ内の他のフレームまたは iframe
• 送信者のドキュメントがJavaScript呼び出しを通じて明示的に開くウィンドウ
• 送信元ドキュメントの親ウィンドウ
• 送信者文書を開いたウィンドウ

受信されるメッセージeventには次の属性があります。

• data– 受信メッセージのデータ、つまり実際の内容。
• origin– 送信元文書の起源。これには通常、スキーム、ホスト名、ポートが含まれます。パスやフラグメント識別子は含まれません。^[1]
• source–WindowProxyドキュメントの取得元 (ソース ウィンドウ) の。

postMessageブロッキング呼び出しではなく、メッセージは非同期的に処理されます。^[4]

から読み込まれたドキュメントAが、またはポップアップウィンドウにexample.net読み込まれたドキュメントBと通信することを考えてみます。 ^[1]ドキュメントAのJavaScriptは次のようになります。 example.comiframe

var o = document.getElementsByTagName ( ' iframe' ) [ 0 ]; o.contentWindow.postMessage ( ' Hello B' , ' http://example.com/ ' ) ;   
 

オブジェクトの origincontentWindowは に渡されますpostMessage。これは、origin通信するドキュメント (この場合はドキュメント B) の と一致する必要があります。一致しない場合は、セキュリティ エラーが発生し、スクリプトが停止します。^[3]ドキュメント B の JavaScript は次のようになります。

function received ( 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' , received , 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]

• クロスサイトスクリプティング
• クロスサイトリクエストフォージェリ
• 同一生成元ポリシー
• クロスオリジンリソース共有
• JSONP

• HTML5 Web メッセージングの推奨事項
• HTML5 Web メッセージング仕様 2010-12-24 にWayback Machineでアーカイブされました
• クロスドキュメントメッセージング – HTML ドラフト標準、WHATWG
• WebKit DOM プログラミング トピック - クロス ドキュメント メッセージング、Apple Developer Library、2012 年 6 月 9 日にオリジナルからアーカイブ、2013 年 12 月 29 日に取得
• Eng, Chris (2010-05-17)、HTML5 セキュリティの要点、Veracode
• クロスドキュメントメッセージングは​​いつ使用できますか?
• HTML5 でサポートされている機能の選択、2011 年 11 月 12 日にオリジナルからアーカイブ、2011 年 4 月 18 日に取得