target="_blank" に rel="noopener noreferrer" を指定する必要はない

以前は、aarea 要素に target="_blank" を指定した場合は、 rel="noopener noreferrer" も指定するのがセオリーでした

しかし、今ではその必要がありません

なぜ指定する必要があったのか

そもそも、なぜ rel="noopener noreferrer" を指定する必要があったのでしょうか。それは、target="_blank" を指定すると、新しいタブ (ウィンドウ) の window.opener プロパティに、新しいタブを開かせたタブの参照が入ってしまうからです。

window.opener.location.href = 'https://example.com'

参照が入っている状態で、このようなコードを実行すると、新しいタブから、新しいタブを開かせたタブを操作できてしまいます。これが、セキュリティ上の問題があるとされていました。

rel 属性に noopener または noreferrer を指定 (両方指定も可) することで、window.opener の中身は null になり、この問題を回避することができていました。これが、近年のウェブ開発で、外部リンクに対してこの属性の指定が必要な理由です。

なぜ指定する必要がなくなったのか

しかし、今では指定する必要がありません。2021 年を境に、主要なブラウザで target="_blank" を指定されたリンクは、無条件に rel 属性に noopener を指定したものとして扱うよう挙動が変わりました (Can I use)。

2021 年より前にリリースされたブラウザは、もはや使われていないも同然です。なんなら、そのバージョンのブラウザは、window.opener に参照が入ってしまうことよりももっと重大な脆弱性が含まれていることでしょう。

ともあれ、今日において、target="_blank"rel="noopener noreferrer" を指定する必要はありません。