postMessageを用いたiframeのクロスドメイン実装について

ドメインB.comが提供するページサービスをドメインA.comで利用したい場合、直感的に実装できる方法はiframeを利用することです。しかし、iframeでの直接対話には **クロスドメイン問題** があり、これを解決する方法は2つあります。1つは、直接ドメインBを指して、直接クロスドメインを殺し、指定された転送ルールを設定するには、ドメイン上のnginxプロキシ転送、nginxを使用するには、別の方法はpostMessageメソッドを使用することです。ここでは、2番目の方法は、使用する方法と考えられる問題点を見てください。

postMessageとは

について、MDNから引用しています。 ポストメッセージ を詳しく説明します。簡単に言うと、postMessageはwindowの下に実装されたメソッドで、異なるドメインの2つのページとやりとりするために使われます。親ページと子ページはpostMessage()でメッセージを送り、メッセージイベントをリスニングすることでメッセージを受け取ります。

postMessageは

親ページindexPage.htmlと子ページiframePage.htmlがあるとします。

i. 親ページが子ページにメッセージを送る

// parent page index.html

// Get the iframe element

iFrame = document.getElementById('iframe')

// Send the message after the iframe is loaded, otherwise the child page will not receive the message

iFrame.onload = function(){

//Send a message immediately after the iframe is loaded

iFrame.contentWindow.postMessage({msg: 'MessageFromIndexPage'},'\*');

}

iFrame.contentWindow.postMessage('MessageFromIndexPage','b.com')を実行します。

メソッドの最初のパラメータは、送信するメッセージで、フォーマットの要件はありません。2番目のパラメータはドメイン名の制限で、ドメイン名が制限されていない場合は*を記入し、3番目のオプションパラメータtransferは通常記入されませんが、このパラメータはブラウザとの互換性に重大な問題があります。

次に、子ページは親ページから送信されたメッセージを受信します。

// subpage iframePage.html

// Listen for the message event

window.addEventListener("message", function(event){

console.log( 'Here is the message received from the parent page, the content of the message is in the event.data property', event )

}, false)

三、子ページから親ページへのメッセージの受け渡し

window.parent.postMessage({name: 'Zhang San'}, '\*');

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) より前のバージョンでは、パラメータ message は文字列である必要があります; 第2パラメータはドメイン制限で、ドメイン制限がない場合は '* ' を記入します。

第四に、親ページは子ページからのメッセージを受け取ります。

//Listen to the message event

window.addEventListener("message", function receiveMessageFromIframePage (event) {

console.log('Here is the message sent from the subpage, the content of the message is in the event.data property', event)

}, false);

postMessageのセキュリティ上の問題点