越境ECセミナー
随時開催中!!

❯❯❯ 台湾・東南アジアの越境ECモール
「Shopee」出店販売サービスはこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信

テクニック

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信

別タブやiframeで呼び出したページとの間で安全に情報を共有する方法として、PostMessageを使った方法があります。

かつては親windowからiframeや別タブの要素の情報を取得することが可能な時代もありましたが、今はセキュリティの問題からできません。
そこでwindow間で安全に情報を共有する方法として誕生したのがPostMessageです。

PostMessageでは呼び出す側、呼び出される側でルールを決めておいて、そのルールに則って情報を共有して処理を行うことになります。
この機能が使われている代表的なものとしては、埋め込み型のYouTubeがあります。
https://developers.google.com/youtube/iframe_api_reference?hl=ja

今回はその方法をご紹介いたします。

↓つくってみたもの
DEMO

メッセージを送る

親windowから子windowへメッセージを送る

子windowから親windowへメッセージを送る

メッセージを受け取る

メッセージを受け取る側では、windowを指定することができないため、
予め送受信するオブジェクトにactionを設定するなどルールを決めておくのが良いと思います。

[2022.2.3追記]
メッセージを受け取るときに送信元のwindowのドメインが明確な場合は、チェックすることが強く推奨されていましたので、
その表記を追加いたしました。(以下の箇所)

参考にさせていただいたサイト

window.postMessage – Web API | MDN

document.referrerでiframeからクロスドメインの親ページのURLを取得できる理由について – yn2011’s blog

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。