はじめに
現場で初めてHTMLのtarget="_blank"に触れました。調べてみると、単なる便利機能ではなくセキュリティ観点でも重要なポイントがあったため、備忘録としてまとめます。
target="_blank"について
target="_blank"は、リンク先を新しいタブ（またはウィンドウ）で開くための属性です。
<a href="https://example.com" target="_blank">リンク</a>
セキュリティリスク
target="_blank"は便利な一方で、遷移先のページから元のページをJavaScriptのwindow.openerというオブジェクトを通じて操作できる可能性があります。
window.opener.location = 'https://example.com';
上記コードが遷移先のページで実行されると、ユーザの意図しないページ遷移（フィッシングサイト誘導など）が発生する恐れがあり、リバースタブナビングと呼ばれる攻撃に繋がります。
rel="noopener" の役割
上記のセキュリティリスクを防ぐために、rel="noopener"を指定します。
<a href="https://example.com" target="_blank" rel="noopener">
これにより、遷移先ページからwindow.openerが参照できなくなります。
rel="noreferrer" について
rel="noreferrer"を指定すると、遷移先にReferer（遷移元URL）を送信しなくなります。
また、noreferrerを指定した場合、noopenerと同様にwindow.openerも無効化されます。
一般的には、セキュリティ対策とReferer制御の両方の意図を明示するため、以下のようにnoopenerと併記して指定するケースが多いです。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
注意点
Refererが送信されなくなるため、アクセス解析や外部サービス連携に影響する場合があります。
明示的に指定する理由
現在の主要ブラウザでは、target="_blank"に対して暗黙的にnoopener相当の挙動が適用されるケースもあります。しかし、以下の理由から明示的に指定することが推奨されます。
- 古いブラウザやWebView環境への対策
- セキュリティ意図の明示
- 実装ルールの統一・レビュー指摘の削減
まとめ
target="_blank"は利便性の高い属性である一方、セキュリティリスクを伴います。
現代のブラウザでは一定の対策が施されているものの、明示的にrel="noopener"を指定することがベストプラクティスです。