target="_blank"とrel="noopener noreferrer"のいま

rel="noopener noreferrer"を使うようになったのは2016年7月頃にtarget=“_blank”のセキュリティリスクに関する記事を読んだからだ。

rel="noopener noreferrer"をつけるようになった背景

新しいウィンドウ/タブでURLを開いたときに<a href="..." target="_blank">のみだと遷移先でwindow.opener.locationが書き換えられてしまい、元のタブが変わってしまうセキュリティリスクがあった。

そのため、以下のようにrel="noopener noreferrer"を追加していた。

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>example.com</a>

2024年現在の状況

rel="noopener"は不要になった

target=“_blank” implies rel=“noopener” behaviorのように、target="_blank"で開いたらデフォルトでrel="noopener"の挙動になっている。

そのため、rel="noopener"は不要になった。

rel="noreferrer"は用途を限定して使う

rel="noreferrer"はアクセス解析に支障をきたすため、リファラ情報を遷移先に渡したくないときに限って使うのが良さそう。