HTML

target="_blank"につけるべきrel属性【noopener / noreferrer】

aタグによるリンクで新しいタブでウィンドウを開いてほしいときはtarget="_blank"を設定しますが、セキュリティ的な観点などからrel="noopener"をつけることが推奨されています。
しかしながら、
rel="noopener"
rel="noreferrer"
rel="noopener noreferrer"
派がいて結局どうしたらいいのかわからない方もいるようなのでまとめです。

結論からいくと実はもうつけなくても(ほぼ)大丈夫です。普通にリンクを貼るだけなら気にしなくてもよいレベルかと思います。
一方でつけて損も少ないので「とりあえずつけとけ」といわんばかりにESLintなどの一部リンターではnoopenerとnoreferrerの両方がついていないとエラーとして検出するようになっています。
迷ったら両方つけておくとよいでしょう。

というのも、現状Firefox, Safari, Chromeなど主要ブラウザは指定がなければ自動でnoopenerがつくようになっています。
openerを取得したかったら明示的につけろ、という形です。デフォルト値の変更ですね。

もし主要ブラウザ以外の挙動不明なブラウザなどにも対応しておきたければrel="noopener"をつける、
既にサポートが切れているIEも対応したければrel="noreferrer"をつける、となります。
主要ではなくwindow.openerが使えるのにデフォルトはopenerを取得する設定という限定的なブラウザを気にしてnoopenerをつけるくらいなら、
古くからあり対応範囲の広いnoreferrer(もしくは両方)をつける方がいいかと思います。
ただし、noreferrerについては遷移先でリファラを取れなくするといったものなので一部アフィリエイトや分析に影響があります
「うちのサイトから来てるんだよ」というアピールができなくなるのでその点は注意してください。

rel属性をつける理由などもっと詳しく知りたい場合は裏付け調査中に見つけたこちらの記事が詳しかったです。

参考までにnoopenerの指定が効くブラウザの一覧はこちらです。
Edgeもカバーされており、記事執筆時点でも95.54%のユーザーがカバーされています。

-HTML