BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ドメインをまたいでwindow.postMessageを使用するにはどうしたらよいですか？

2023-02-03 10:17:24

質問

のポイントは何でしょうか？ window.postMessage のポイントは、異なるドメインでホストされているウィンドウ/フレーム間の安全な通信を可能にすることであるように思えますが、実際には、それは を許可します。 を許可していないようです。

以下はそのシナリオです。

  1. iframe> を埋め込む ( src ドメインBに * ) ドメインAのページで
  2. iframe>は、ほとんどが<script>タグであり、その実行の最後には...。
  3. window.postMessage()を呼び出す。 some_data , ページ_on_A )

その <iframe> は間違いなくドメイン B のコンテキストにあり、その <iframe> に埋め込まれた javascript が正しく実行され、次のように呼び出されることを確認しました。 postMessage を正しい値で呼び出していることを確認しました。

Chromeでこのエラーメッセージが表示されます。

へのメッセージの投稿ができません。 A . 受信者はオリジン B .

以下は、Aのページにメッセージイベントリスナーを登録するコードです。 

window.addEventListener(
  "message",
  function (event) {
    // Do something
  },
  false);

を呼び出すことも試してみました。 window.postMessage(some_data, '*') を呼び出してみましたが、エラーを抑制するだけでした。

私はここでポイントを逃しているだけでしょうか、window.postMessage(...)はこのために意図されていないのでしょうか？ それとも、私がひどく間違ったやり方をしているだけなのでしょうか?

*Mime-type text/html, which it must remain.

どのように解決するのですか？

Chrome 5.0.375.125 で動作する例です。

Bページ（iframeコンテンツ）です。 

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

を使うことに注意してください。 top.postMessage または parent.postMessage ではなく window.postMessage ここで

Aというページです。 

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.origin !== 'B'){ return; } 
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

AとBは次のようなものでなければなりません。 http://domain.com

EDITです。

から 別の質問 を見ると、ドメイン(ここではAとB)には必ず / に対して postMessage が正しく動作するようにします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します