target="_blank" に rel="noopener noreferrer" を指定する必要はない
初版: 2024/7/30
更新: 2024/7/30
以前は、a
や area
要素に 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"
を指定する必要はありません。