JavaScript の window.open() を使うと、新しいウィンドウ（またはタブ）を開き、親ウィンドウとの間で情報をやり取りできます。
この記事では、opener を使った親子ウィンドウの関係や、実務で重要なセキュリティ設定（noopener）の基本を分かりやすく解説します。

window.open とは？

JavaScript の window.open() は、新しいウィンドウ（またはタブ）を開くためのメソッドです。

const child = window.open("child.html", "childWindow");

戻り値として「開いたウィンドウの window オブジェクト」が返ってきます。
これを使うことで、親ウィンドウから子ウィンドウを操作できます。

opener とは？（子ウィンドウ → 親ウィンドウ）

子ウィンドウ側では、window.opener を使うことで
「自分を開いた親ウィンドウ」を参照できます。

// 子ウィンドウ側のコード
console.log(window.opener); // 親ウィンドウの window オブジェクト

これにより、子ウィンドウから親ウィンドウの DOM を操作することも可能です。

親ウィンドウ → 子ウィンドウを操作する例

const child = window.open("child.html", "childWindow");

child.document.write("
子ウィンドウに書き込み
");

ただし、同一オリジン（同じドメイン）である必要があります。
異なるドメインの場合はセキュリティ上の理由で操作できません。

子ウィンドウ → 親ウィンドウを操作する例

// 子ウィンドウ側
window.opener.document.body.style.background = "yellow";

こちらも同一オリジンである必要があります。

noopener で opener を無効化する

セキュリティ上の理由から、最近のブラウザでは
opener を無効化するための設定（noopener） が推奨されています。

window.open("child.html", "_blank", "noopener");

noopener を付けると、子ウィンドウから親ウィンドウを参照できなくなります。

なぜ noopener が必要なのか？

• 悪意のあるページが opener を使って親ウィンドウを書き換える可能性がある
• フィッシング攻撃を防ぐため
• パフォーマンス改善（ブラウザの最適化）

そのため、実務では target="_blank" + rel="noopener" が標準です。

まとめ

window.open と opener を使うことで、
親ウィンドウと子ウィンドウの間で相互に操作ができます。

ただし、セキュリティ上の理由から opener を無効化するケースも多いため、
用途に応じて使い分けることが重要です。