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

テンプレートを使って無料でペラサイトが作成できる Strikingly

本ページでは、Strikingly というサービスを紹介します。 主に取り上げているのは 無料プラン です。 目次1. Strikingly とは?2. ウェブページの作成テンプレートを選ぶ雛形として …

Chrome

Chrome 78 デベロッパーツールの新機能

Chrome 78 のデベロッパーツールにおいて、主な新機能を紹介します。

Web

JSFiddle を使って HTML/CSS/JavaScript をウェブページに埋め込む

JSFiddle というサービスを使って、ウェブページに HTML/CSS/JavaScript を埋め込んでみましょう。 目次1. JSFiddle とは?2. ウェブページに埋め込む手順(1) ア …

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。

Web

本サイトに、ココナラで出品してるサービスのウィジェットを表示しました

ココナラで出品してるサービスのウィジェットを、本サイトに表示しました。