<a>タグをクリックしたら別ウィンドウで開く方法とその脆弱性

<a>タグをクリックすると別ウィンドウで遷移先を開く方法と脆弱性を今回は紹介。

別ウィンドウで開く方法

<a>タグ内にtarget=”_blank”を付けることでこれは解決する。

<a href="https://www.google.co.jp/" target="_blank">Googleへ</a>

しかし、target=”_blank”を使用することによる脆弱性もある。

まずは先に回避策を記載する。解決策だけが知りたい人はここまでで大丈夫。

<a>タグ内にrel=”noopener noreferrer”を記述するだけで大丈夫。

<a href="https://www.google.co.jp/" target="_blank" rel="noopener noreferrer">Googleへ</a>

target=”_blank”で脆弱性が発生してしまう理由として、遷移元のページを操作できてしまうことが挙げられる。

少し深堀りして説明したい。

JavaScriptではwindow.openerというプロパティを使用すれば、別ウィンドウを開いた際に、新しく開いたウィンドウが、自分を開いた元のウィンドウを参照したり、操作したりすることができる。

遷移先のスクリプトを使用して遷移元のウィンドウを変更することができてしまう。

具体的な例を挙げてみる。遷移先が悪意のあるサイトだったとする。サイトにユーザーがアクセスしてきたら、遷移元のウィンドウを、JavaScriptを使用して馴染みのあるECサイトのログイン画面に似たページに遷移させる。

そうすることで、ユーザーが元のウィンドウに戻ってきたら、「あれ？このサイトにログインしてなかったかな？」と思い、IDとパスワードを入力したら、これでフィッシング詐欺の完了となる。

また、別ウィンドウで開くことに限った話ではないが、aタグを使用すると遷移元のページURLを参照できてしまう。基本的に問題ないが、URLにidが含まれているような場合は注意が必要である。

ここまで説明してきたらある程度理解できるかもしれないが、noopenerを記載することでwindow.openerを無効化できる。同様にnoreferrerを使用すれば、遷移元のURLを参照できないようにすることができる。

ただ、アクセス分析ツールなどを使用する際や、UX向上のための機能であれば、一概にこれらのプロパティを追加すればいいという訳ではないので機能の検討が必要がある。

少し別の視点であるが、悪意のあるサイトへリンクを管理者が貼らなければこの手の攻撃は起きないのではないかと思うかもしれない。

実際にはサイト管理者が意図して外部サイトへのリンクを貼りつけたりしなくても、この脆弱性をついた攻撃は可能である。

コメントなどの投稿でリンクを貼ったり、XSSを利用してスクリプトを埋め込んだり、CDNや広告のサードパーティなど外部のJavaScriptを使用などが考えられる。

参照先のサイトの信用性と併せてその他の攻撃を考慮する必要がある。

サンプルサイトでスクリプトを動かしてみようかと思ったがWordPressではデフォルトでnoopenerが有効になっているということなので、今回は諦めます。