なぜtarget_blankを使わない方が良いと言われるのか
現在はセキュリティの観点からtarget="_blank"による別タブ表示は推奨されていません。
現在はブラウザ側で対策が行われましたが、以前はリンク元ページを自在に変更できるコードが効いていました。
危険なのは_blankではなく偽ページへのログイン情報入力です。気を付けましょう。
target="_blank"は使わない方が良い
htmlコードを勉強すると、どこかのタイミングでtarget="_blank"は使わない方が良い事を知ります。
しかし実際に使用しても、何ら問題を感じた事は無いはずです。
それは_blankが持つ脆弱性を突かれやすいシーンが限定されている事です。
さらにブラウザ側も対策を進めたため、それまで発生していた被害がおきなくなった事も大きな要因です。
ですがそれ以外の様々な要因もまだ残っており、引き続き_blankは使わない方が良いというのが大勢です。
URLリンクを投稿できるサイトが対象
今回はあえて、aタグのtarget="_blank"が持つ脆弱性についてご紹介します。
先述の通りこの被害に遭うWEBサイトは限定され、通常のWEBサイトではあまり考慮する必要はありません。
対象となるWEBサイトは例えば掲示板など、第三者によってテキストやURLリンクなどを自由に投稿できるサイトです。
この様に書き込みを許可した仕組みのサイトでは、_blankの脆弱性への対策が必要になります。
現在は主要ブラウザで対策済み
現在は多くのブラウザで改良が加えられ、本記事で紹介するリンク元のURL操作ができない様になっています。
ブラウザ機能で自動ブロックされるなら安心と思うかも知れませんが、油断は禁物です。
管理者側でも対策として推奨されるタグの設置をするべきです。
それでは詳しく紹介していきましょう。
_blankによる別タブ表示
aタグのtarget属性はリンク先ページの表示形式を指定するもので、様々な値が設定できます。
target="_self"…現在のタブで開く（デフォルト）
target="_parent"…親タブで開く
target="_top"…最上位のタブで開く
target="_blank"…別タブで開く
別タブ表示の代表例
aタグのリンクを新しいタブで開く場合、通常は下の様に指定します。
<a href="URL" target="_blank">リンクテキスト</a>
_blankと設定する事で、現在のページはそのまま別画面が開く訳ですね。
最近のブラウザはタブ表示なので、元のページを残したまま別タブが開きます。
すぐに元のページへ戻れるし、2つのページの比較などもできて便利な機能ですよね。
ところがこの別タブを開くtarget="_blank"には、脆弱性があるとされているのです。
Tabnabbing（タブナビング）攻撃
この時残した元のタブページを対象にするのが「Tabnabbing」と呼ばれる攻撃です。
Tabnabbingはまさに「タブをナビゲートする」事から名付けられています。
Tabnabbingを仕込まれると、_blankのリンクを押したユーザーがフィッシング詐欺に遭う可能性があります。
ではこの_blankにどのような脆弱性があるのか、詳しく解説していきましょう。
前提として以下の様に呼ぶ事にします。
・aタグにtarget="_blank"を設定したページ…「リンク元」
・飛んだ先のページ…「リンク先」
リンク元ページを操作する命令
Tabnabbingは、aタグでURLを指定する以外にリンク元のURLも変更するコードを埋め込む行為を指します。
上記の様に新しいタブでリンク先が開くと同時に、元のタブで表示していたリンク元ページが別のところに変わります。
リンク元の切替先は自由に指定できる
この時リンク元で変更するページは自由に指定できる点が特徴です。
掲示板サイトの中には、HTMLコードでリンク先とリンク元を両方同時に指定できるところがあります。
悪意ある第三者は、こういった埋め込みができるサイトを探しているのです。
この時使われる命令コマンドが「window.opener.location」です。
window.opener.location
javascriptに「window.opener.location」と呼ばれる命令構文があります。
リンク先のページから「window.opener.location=newURL」と実行すると、リンク元がnewURLにジャンプするという機能です。
指定したnewURLのページに切り替わるのは「リンク先」ではなく「リンク元」である事がポイントです。
つまりhref="URL"でリンク先を開き、window.opener.locationでリンク元を差し替える事ができる訳ですね。
この機能を利用して、リンク元のタブを自分が作った偽ページにこっそり差し替えるのがミソです。
どのような攻撃に利用されるのか
悪意ある第三者が、掲示板サイトなどでリンク先と一緒にwindow.opener.locationを埋め込んだとしましょう。
その時「リンク元ページの変更先」に、自分が作った偽サイトを指定するのです。
例えば表面上はGoogleアカウントのログイン画面で、実は入力情報を盗めるページなどです。
では実際にユーザーがそれに遭遇したらどうするでしょうか。
偽のGoogleアカウントログイン画面
ユーザーがリンク先ページを見た後、リンク元ページに戻ると「Googleへ再ログインしてください。」という画面が出ている訳です。
ほとんどのユーザーは「あれ？」と思うでしょう。
しかし見た目は全く違和感のないGoogleアカウントのログイン画面です。
人によっては、ログインしようとするのではないでしょうか。
入れたログイン情報が盗まれる
しかし実はこのページは偽ページですので、ログイン情報を入れてはいけないのです。
入力してしまうと、あなたのアカウント情報がそのまま盗み取られてしまいます。
本当に入力を求められる時がある
Googleアカウントは常に利用しているでしょうし、たまに再ログインを聞かれる事があるのは事実です。
ログインしっぱなしで放置していたり、キャッシュを消したりするとログインページが表示される事が確かにあります。
利用歴が長い人ほどこれに遭遇した事があるので、引っかかりやすいのです。
入力後は元の画面に戻る
しかも偽ページでログイン情報を入力した後は、さっきまで映っていたリンク元のページにリダイレクトで戻っている場合が多いです。
こうされると、「ログインしたから元のページへ戻って来たんだ」と思いますよね。
ですのでユーザーは情報を不正に取得されたことに気づかないのです。
対策方法
現在は以下に紹介するコードを挿入をしなくても、ブラウザ側での対策がされています。
rel="noopener"
主な対策としては、aタグに「rel="noopener"」が自動挿入されるようにする事です。
そうするとリンク先からwindow.openerの命令が効かなくなります。
さらにリンク元とリンク先が別スレッド扱いになるため、パフォーマンスの面でも良い効果があります。
noopener＋noreferrer
noopenerがサポートされていないブラウザ向け対策に、noreferrerも同時に指定する事が推奨されています。
noreffererを指定すると、リンク先にリンク元の情報が送られないようになります。
下の様に両方併用して設定されるようにしましょう。
<a href="URL" target="_blank" rel="noopener noreferrer">リンク先</a>
F12ディベロッパーツールでテスト
target="_blank" rel="noopener noreferrer"の付いたaタグをクリックして、リンク先へ飛びます。
リンク先でF12デベロッパーツールを開けましょう。
コンソールから「window.opener.location = "https://www.yahoo.co.jp/"」と実行してみましょう。
エラーが表示される
Uncaught TypeError: Cannot set property 'location' of null at <anonymous>:1:15
というエラーが表示され、リンク元のタブは切り替わらなくなります。
※現在はブラウザ側の対策により、rel="noopener noreferrer"がなくてもエラーが出る様になっています。
まとめ
今回紹介した脆弱性は「過去のもの」であり、現在はブラウザ機能による対策がされています。
しかしサイト管理者としては、やはりtarget="_blank"の使用を控えた方が良いでしょう。
ですが、注目すべきは_blankの脆弱性ではありません。
_blankが危険なのではなく、偽ページでログイン情報を入力する行為が危険なのです。
問題は偽のページでのログイン
現在はブラウザで対策が取られているのでリンク元タブは変わらない様になりました。
しかし別の方法で偽ぺージを見せられ、情報を入力してしまったらアウトなのです。
もちろんサイト管理者にも責任がありますから、ブラウザに頼ってばかりはダメです。
URLリンクを投稿できる機能を導入するなら、rel="noopener noreferrer"もセットで導入するべきです。
ユーザーはさらなるレベルアップを
大前提として、前にどこのページを開いていたか位は認識しておくべきです。
一つ前に開いていたタブが勝手に違うページになったら「怪しい」と思いましょう。
開けたページでログインを聞かれるのならまだわかります。
今回は開けたページではなく前のページが勝手に変わる訳ですから、怪しいと思うべきなのです。
今回の件はブラウザ対策が取られていますが、将来別の手段であなたの目の前に偽ページが映る可能性は大いにある訳です。
Google関連のサービスページか？
ログイン情報不正取得の対象になりやすいのは、Googleアカウントなどの大きなサービスでしょう。
では今あなたはGoogle関連のサービスページを開いているでしょうか？
つまり全く関係ないサイトを開いている時に、いきなりログイン画面が出てきたら怪しい訳ですね。
自分が今利用しているサイトとの関連性を考える事も、判断材料になるはずです。
誰もあなたの事を守ってくれないので、自己防衛レベルを上げていくしかありませんね。
