はじめに
先日フロント部分実装時のこと、URLクリックと同時に別タブでページを表示させたかったのでtarget=_brank
を使用することにした。
target=_brankについて調べていると「危険」やら「ヤバい」などのなにやら不穏なワードとセットで出てくるではないか。
ん〜なるほど【タブナビング】なる攻撃方法があるのね。
タブナビングとは
簡単に説明すると、非アクティブなタブ（現在見ていないタブ）のページを勝手にSNSなどの偽ログインページに飛ばし、入力させた個人情報を引き抜くフィッシング詐欺の一種である。
タブナビングお主もなかなかの悪よの。。。
タブナビング対策
ではどうすればタブナビングを防げるのか。
答えは簡単rel属性にnoopenerとnoreferrerを使用するだけ。
以下例を御覧ください。
【例】
<a href="https://example.com" target="_blank" rel="noopener noreferrer">ここ押して</a>
なぜnoopenerとnoreferrerを使用するのか？
そもそもタブナビングはtarget="_blank"で開いたページが元ページの情報をwindow.opnerオブジェクトとして持っていることにより、window.opener.locationで元ページを操作できてしまう事に起因している。
逆にいうとnoopenerでwindow.opnenerの情報を空にしてしまえば操作は出来ないということになる。
またnoreferrerを使用することでもリンク先に参照元のリンク情報を渡さないようにすることが出来るため、こちらで対応することもできる。
ちなみにどちらか一つでもタブナビング対応が出来そうだがなぜ両方使用しているかというと、カバー出来るブラウザの種類を拡げるためである。
※ブラウザによってはtarget=_brank使用のaタグに対して【既定値としてnoopenerが適用】されていたりする
おわりに
そういや以前にフィッシングサイトを見る機会があったが、マジで精巧に作られていてよく見ないとわからない感じだった。
急いでる時など尚更釣り上げられる可能性があるので気をつけたいと思ふ。