window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

投稿日：2019年2月12日更新日：2021年2月1日

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。

window.opener オブジェクト

この window オブジェクトの opener というプロパティには、「自分を表すウィンドウを開いた元の window オブジェクト」がセットされます（いつでもセットされるわけではありません）。例えば、Aというページ上のリンクをクリックして、B というページを開いた場合、B から見ると A が opener ということになります。

window.opener のセキュリティ問題

もし opener が自由に使えるとなると、例えば「知らないうちに、元ウィンドウ側がフィッシングサイトに遷移されている」というように悪用される可能性も考えられます。このように opener はセキュリティの問題を多少はらんでいるため、利用できる条件が限定されているのですが、イマイチその条件が分かっていなかったため、今回いくつかの条件について試してみました。

実験の条件

調査した条件は以下の3つです。

元のページのドメインと、開くページのドメインが同じかどうか
aタグに、target="_blank" がセットされているかどうか
aタグに、rel="noopener noreferrer" がセットされているかどうか

ページを開く側のリンクは以下のように書きます。

1番シンプルなリンク

<a href="xxx">Link</a>

target="_blank" をセットしたリンク

<a href="xxx" target="_blank">Link</a>

更に rel="noopener noreferrer" をセットしたリンク

<a href="xxx" target="_blank" rel="noopener noreferrer">Link</a>

開いた先のページ側のHTMLは以下のようになります（一部のみ）。

<!-- 省略 -->

<!-- このボタンを押すと、ブラウザのコンソールに window.opener を出力するようにします -->
<button id="btn1">Output window.opener on console</button>

<!-- 省略 -->

<script>
window.addEventListener("load", (event) => {
  document.querySelector('#btn1').addEventListener('click', () => {
    console.log(window.opener);
  });
});
</script>

調査結果

その結果が以下の表です。

`window.opener` にアクセスできるかどうかの調査結果
遷移先ページのドメイン	target=”_blank”	rel=”noopener noreferrer”	結果
外部 (クロスドメイン)	なし	–	取得できない
外部 (クロスドメイン)	あり	–	取得できない
内部	なし	なし	取得できない
	なし	あり	取得できない
	あり	なし	取得できる
	あり	あり	取得できない

window.opener にアクセスできたのは、以下の条件が全て満たされた場合のみでした。

同ドメイン
target="_blank" がセットされている
rel="noopener noreferrer" がセットされていない

この仕様であれば、window.opener を悪用するというのはかなり難しいのではないかと思います。

参考

📂-Web

執筆者：labo