Web

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

投稿日:2019年2月12日 更新日:

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

window.opener オブジェクト

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

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

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

実験の条件

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

  1. 元のページのドメインと、開くページのドメインが同じかどうか
  2. aタグに、target="_blank" がセットされているかどうか
  3. 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


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み(遅延ローディング)2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Web Vitals

highlight.js のハイライト処理を Web Workers で実行する

highlight.js のハイライト処理を Web Workers で実行する方法を紹介します。

Web Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。

Web

Uptime Robot を使ってウェブサイトの死活監視を行う

Uptime Robot というウェブサイトの死活監視サービスの使い方を説明します。