aタグのtarget="_blank"の問題点と対策|Tabnabbing

target="_blank"の問題点

aタグにtarget="_blank"と設定すると、新規タブを開くことができますが、target="_blank"で開いた新規タブページから元のページを操作できてしまいます。

HTML例

<a href="https://example.com" target="_blank">新規タブ</a>

同様のことがJavaScriptのwindow.open()でもいえます。

JavaScript例

window.open("https://example.com","_blank");

上記のような設定の場合、以下のように新規タブページでwindow.openerを操作でき、元のページのURLを変更できてしまいます。

Tabnabbing（タブナビング）

この仕組みを悪用したTabnabbing（タブナビング）というフィッシング詐欺の手法が存在します。以下のように新規タブページでログイン画面などがあるフィッシングサイトのURLに変更します。

新規タブページ

if(!window.opener || window.opener.closed){
  console.log('メインウィンドウなし'); // メインウィンドウが存在しない場合の処理
}
else {
  window.opener.location.href = 'フィッシングサイトなどのURL';
}

パフォーマンス問題

また、target="_blank"で開いた新規ページと元のページは同一プロセス（スレッド）で処理されるため、処理によっては元のページのパフォーマンスが低下してしまいます。

対策方法

aタグにtarget="_blank"を設定する場合、rel属性にnoopenerを設定し、リンク先のページからwindow.openerによる元のページ操作をできないようにします。

ただし、noopenerは古いブラウザではサポートされていないため、サポートされているブラウザが多いnoreferrerも同時に設定します。

noopenerブラウザ別サポート状況：https://caniuse.com/rel-noopener
noreferrerブラウザ別サポート状況：https://caniuse.com/rel-noreferrer

noreferrerを設定するとリンク先にリファラを送らないようになり、noopenerと同様に新規タブページから元のページのURLを操作できないようになります。（リファラが必要なアフィリエイトリンクの場合は注意が必要です）

Chromiumブラウザはnoopener、noreferrerを使用すると独自のプロセスで新規ページを開くように最適化されています。

まとめ

aタグのtarget="_blank"の問題点と対策について解説しました。

TabnabbingはGoogleは脆弱性としていませんが、フィッシングに利用される可能性のあるサイト構成の場合は対策を検討されていみてはいかがでしょうか。

参考：https://github.com/danielstjules/blankshield