ChromeのCORSを超えて、子画面から値を返したい

Question

お世話になっております。

window.openで開いた先の一覧画面でクリックすると、その内容を親画面に返す処理を実装します。
親画面に渡す際にwindow.openerを使用しています。
ここで、親画面と子画面ではサイトのURLが以下例のように異なります。

親画面：https://client1.test.com/
子画面：https://common.test.com/

Internet Explorerではこの処理で正常に親画面に値が返されます。
Chromeの場合、エラーになってしまいます。
いわゆるCORS(Cross-Origin Requests)が原因だと考えており、ヘッダーに下記を埋め込んでみたのですが正常動作しません。
ブラウザ側の設定は変更していません。(ユーザーがいるものなので変更できないです)
ChromeのCORS対策を超えるための設定をご教示いただけないでしょうか。

---

親画面のJavaScript：

// 子画面を開く
var ShowSearch = function () {
	window.open("https://common.test.com/", "_blank");
};
// 子画面から値を受け取る
var OnSelectedItem = function (value) {
	alert(value["test"]);
};

子画面のJavaScript：

<script>
var OnSelect = function () {
	if (window.opener && window.opener.OnSelectedItem) {
		var result = {};
		result["test"] = "test";
		// 子画面に値を渡す
		window.opener.OnSelectedItem(result);
	}
};
</script>
<button type="button" onclick="OnSelect();">選択</button>

エラーメッセージ：
Uncaught DOMException: Blocked a frame with origin "https://common.test.com/" from accessing a cross-origin frame.
(window.opener.OnSelectedItemで発生します)

親画面、子画面両方のサーバーサイドでHttpのレスポンスヘッダーに以下を追加しています。

Access-Control-Allow-Origin:*
Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:GET,POST,HEAD,OPTIONS
Cross-Origin-Opener-Policy:Allow
Cross-Origin-Window-Policy:Allow
X-Frame-Options: sameorigin

Answer 1

この問題はCORSではなく、同一オリジンポリシーによるものですね。
まず、CORSですが、下記のように別Windowやframe/iframeは対象外です。

このオリジン間共有仕様は、以下のようなサイト間 HTTP リクエストを有効にすることができます。

• 前述のように XMLHttpRequest または Fetch API を呼び出す。
• ウェブフォント (CSS の @font-face で別ドメインのフォントを利用するため)。これによりサーバーは、許可したウェブサイトのみから読み込みや利用ができる TrueType フォントを提供できます。
• WebGL テクスチャ。
• drawImage() を使用してキャンバスに描画される画像やビデオフレーム。
• 画像から生成する CSS シェイプ。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS より引用

したがって、本来は、以下の箇所で同一オリジンポリシー違反が発生するはずです。

<script> // 子画面のJavaScript：
var OnSelect = function () {
    if (window.opener && window.opener.OnSelectedItem) {
                        // ↑この参照がエラーになる

IEでエラーにならないのが不思議です。手元のIE環境ではエラーになります。

それでは、このようなケースではどうすればよいかというと、PostMessageを使うのが定石です。

window.postMessage() は、 Window オブジェクト間で安全にクロスドメイン通信を可能にするためのメソッドです。例えば、ポップアップとそれを表示したページの間や、iframe とそれが埋め込まれたページの間での通信に使うことができます。
https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage より引用

上記はMDNからの引用ですが、まさに今回の目的にぴったりです。

以下、大まかな流れですが、まずは親画面側では、メッセージを待ち受ける仕掛けを作ります。

// 親画面側
// イベントリスナを設定
window.addEventListener("message", receiveMessage);

// メッセージ受け取り関数
function receiveMessage(event) {
  if (event.origin !== "https://common.test.com") {
                     // ↑ 送信元のオリジン
    alert("オリジン違反");
    return;
  }
  alert(event.data['test']); // 受け取ったデータを表示
}

子画面では以下のようにメッセージを送ります。

// 子画面側
// メッセージ送信
window.opener.postMessage(result, "https://client1.test.com");
                                    // ↑ 送信先のオリジン

試してみてください。

Comments

[mno]

教えていただいた方法で解決できました。
ありがとうございました。