山下寛人オフィシャルブログ

オイシックス株式会社 執行役員 システム本部長 山下寛人の公式ブログです。

JavaScriptでクロスドメイン通信

あるドメインのウィンドウと別のドメイン

ウィンドウのJavaScriptを連動して

動かしたい場合がありますが、

セキュリティの制限があり

同じドメインの場合でないと

動かすことができません。

ドメインが違うとクッキーも共有できません。

同じドメインでもhttpとhttpsだと

ドメインとみなされます。

これは大変困ります。


しかしセキュリティを担保しつつ

連動させる方法が用意されています。

それがwindow.postMessage()です。


使い方。

まず受信側でイベントリスナーを用意します。

window.addEventListener('message', function(e) {
if (e.origin == 'http://正しいドメイン') {
//処理
}
},
false
);

送信側でメッセージを送信します。

otherWindow.postMessage('メッセージ', '*');

このとき受信側でe.originを判定していますが

これはセキュリティを担保するためにやって

おきましょう。

任意のドメインからメッセージを受け付ける

場合もあるかもしれませんが、特定の

ドメインから受け付ける場合が普通だと

思いますのでその場合はチェックして

おいたほうが確実です。