ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す 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>
調査結果
その結果が以下の表です。
遷移先ページのドメイン | target=”_blank” | rel=”noopener noreferrer” | 結果 |
---|---|---|---|
外部 (クロスドメイン) |
なし | – | 取得できない |
あり | – | 取得できない | |
内部 | なし | なし | 取得できない |
あり | 取得できない | ||
あり | なし | 取得できる | |
あり | 取得できない |
window.opener
にアクセスできたのは、以下の条件が全て満たされた場合のみでした。
- 同ドメイン
target="_blank"
がセットされているrel="noopener noreferrer"
がセットされていない
この仕様であれば、window.opener
を悪用するというのはかなり難しいのではないかと思います。