はじめに

webアプリケーション作成時に、リンクを別タブで開かせたいと思ってググってみたところ、target="_blank"だけの記述では危険だという記事がヒットした。

リンクを別タブで開かせる基本的な記述

<a href="リンク先" target="_blank">別タブで開く</a>

aタグでリンクを別タブで開かせたいときの基本的な記述。これだけでリンクを別タブで開かせることができる。しかしこれだけだと危険性があるらしい。

target="_blank"だけの記述では、セキュリティ面とパフォーマンス面で問題があると、googleのデベロッパーサイトで指摘されている。

具体的な問題内容と対策についてまとめてくれている日本語記事があったのでこちらも参考に

上のリンク先でも紹介されているが、target="_blank"と併用してrel="noopener"またはrel="noreferrer"を記述することが推奨されている。

<!-- 記述例 -->
<a href="リンク先" target="_blank" rel="noopener">別タブで開く</a>

rel="noopener"、rel="noreferrer"はどちらもリンク先からリンク元が参照できなくなるようにする。
これでリンク先からリンク元情報を抜き取られたり操作されなくなる。

今回は個人的なwebアプリケーションの中で別タブリンクを貼りたかったので大きく影響のある話ではなかったが、これからwebアプリを開発していくにあたって頭に入れておいたほうが良さそうな内容だと思った。