[JavaScript] postMessageでクロスドメインメッセージ通信

  • 89
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

原則、JavaScriptでは異なるドメイン間のAjax通信はできません。つまり、自サイトから他サイトのデータを取得することはできません。

HTML5では、異なるドメイン間でも安全にデータをやり取りできるよう、postMessage が用意されました。

yotsuba_s.jpg コード例

基準サイトから外部サイトへメッセージを投げて、返信を受け取る場合のコード例です。外部サイトのwindowオブジェクトを必要とするため、iframeと併用されることが多いようです。

<基準サイト側>

基準サイト.html(抜粋)
<!-- 外部サイトへメッセージを投げるためのiframe -->
<iframe id="ifrm" src="http://外部サイト.com/xxx.html" style="display:none;"></iframe>

<script type="text/javascript">
// windowロードイベント
window.onload = function() {
    // iframeのwindowオブジェクトを取得
    var ifrm = document.getElementById('ifrm').contentWindow;
    // 外部サイトにメッセージを投げる
    ifrm.postMessage("HELLO!", 'http://外部サイト.com');
};

// メッセージ受信イベント
window.addEventListener('message', function(event) {
    alert(event.data); //'WORLD!'
}, false);
</script>

<外部サイト側>

外部サイトのxxx.html(抜粋)
<script type="text/javascript">
// メッセージ受信イベント
window.addEventListener('message', function(event) {
    // メッセージ送信元のサイトに返答する
    event.source.postMessage('WORLD!', event.origin);
}, false);
</script>

(・o・ゞ いじょー。

yotsuba_s.jpg 参考URL

▼Web Messaging API を使ってみる
http://qiita.com/naoiwata/items/0a31d999b2dcd5098289

▼postMessageとiframeでクロスドメインメッセージを送受信してみる
http://zafiel.wingall.com/archives/6631

▼クロスドメインで同じlocalStorageを使うテクニック
http://news.mynavi.jp/articles/2010/09/09/localstrage-on-many-domains/

▼PostMessageを使ったクロスドメイン通信によるメッセージの送受信とは?
http://the-zombis.sakura.ne.jp/wp/blog/2013/10/15/post-2031/

▼第3回 localStorageとpostMessageの使いどころ(2)
https://gihyo.jp/dev/serial/01/front-end_web/000302

▼JavaScriptでブラウザ上クロスドメイン通信のための手段
http://d.hatena.ne.jp/TipsMemo+computer-technology/20140401/p3