開発状況

• vue.jsでdevserverを使って、localhost開発をしている。
• 開発しているSPA（ページA）が、別ウィンドウでページBを開いて、そちらとpostMessageで通信をしている。
• 本番で動く場合は、ページAもページBも同一ドメインである。
• 開発中は、ページAはLocalhostで、ページBが諸般の事情でインターネット上の開発サーバを利用する状況

開発中は以下のような感じです。

問題

同一ドメインの場合では問題ないのですが、開発環境ではドメインが違うので以下のようなエラーがでます。

Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

ちなみに、ページAからページBを開いて、ページBから通信を待つのは、以下のようにしています。

      const win = window.open('http://example.com')
      // オープン先のサイトのロード時間があるので、1秒ほど待機をしてからイベントを設定する。
      setTimeout(() => {
        win.addEventListener('message', event => {
          const data = event.data
          if (data.command === 'close_page') {
            win.close()
          }
        }, false)
      },
      1000)

何をしているかというと、ページBを開いて、ページBで何かを作業して、処理が完了したら、ページBからpostMessageを送ってもらいます。ページAは、それを待ち受けて、ページBを閉じるというものです。

ここでは端折っていますが、ページBからページAに必要なデータも送ってもらっています。

解決法

まずは、以下を試しましたが、うまくいきませんでした。
クロスドメイン制約を回避するChromeショートカットを作る

でも、それなりにセキュリティレベルは落ちているし、開発用のChrome環境としてもよいので、これはこれで生かしておきます。

次に、Chromeの実験的な機能を操作できるフラグがあるということを、ソースは失念しましたが、見つけて、変更しました。

ChromeのURLに「chrome://flags/」を入力します。

下記のように「Disable site isolation」を「Disable」にしたらエラーがでなくなりました。

イベントリスナーが設定されているかを確認する

今回、addEventListenerで待ち受けているのですが、これをモニターする方法も探しました。
DevToolsのイベントの監視にあります。

みんながお世話になっている開発者ツールのコンソールで、「getEventListeners(window)」と入力すると、イベント一覧が取得できます。

今回は、「message」イベントを仕掛けているので、「messege」を開きます。
ここでは2個ありあした。その1個目の「lisner」を開くと、「FunctionLocation」が「」がでてきます。こいつになります。

なぜ1個目だとわかったかというと、同一ドメインでの場合と開発環境での場合で比較したからです。
エラーがでにく本番の場合で、イベントが効いてないようなら、こちらで調べてみてもいいかもしれません。

最後に

個人的に、「Disable site isolation」を「Disable」にしたら、「enable site isolation」で、ほんとにページ間通信ができないんじゃない！？って考えているのですが、まぁ、とりあえず、デバッグを進めたいので目をつむっておきます。

このあたり、Chromeのデバッグ関係の詳しい説明があれば嬉しいんですけど。。。。