知らないと危険！aタグのtarget=_blankの脆弱性

今回の記事は、新米エンジニアの僕がフロントエンドの保守を行って、普段通りプルリクを出したら、すごく有益なコードレビューを上司の方にしていただいたのでそれをまとめます。

aタグのtarget="_blank"

まず、このtarget="_blank"をaタグに追加するとどうなるかを説明します。
このオプションを追加することでaタグをクリックしたときに別タブが開かれて表示されるようになります。
これは、ブラウザの設定なども影響するのですが、基本的にはこのオプジョンをつければ、別タブでの表示が確約されます。

target="_blank"のセキュリティ的な問題点

本来、リンクをクリックした時に別タブが開かれるようにする理由としては、ユーザエクスペリエンスを向上させ、離脱率を下げるという目的があります。しかし、このtarget="_blank"には、リンク元の情報を保持して別のタブを開くという性質があります。これによって、悪意あるユーザがリンク元のページの情報を抜き取ったり、攻撃をしたりするという問題が起こりえます。

解決策

この解決策としては、rel="noopener noreferrer"をaタグに追加するということです。
これにより、新しいタブが開かれたときに、そのタブからリンク元への参照とリファラ情報が削除されます。これにより、攻撃者がリンク元を使用してアクセスできる攻撃ベクトルが制限され、セキュリティが向上します。