外部リンクに使う target="_blank" にセキュリティリスクがあるって知ってました？実際、Google Chrome や他のブラウザでは以下のような警告メッセージが表示されることがあります。

🚨 なぜtarget=”_blank”は危険なの？

理由：window.opener 経由で悪意ある操作が可能になるから
簡単に言うと「target=”_blank”」で開いた リンク先のページ（ページB）から、元のページ（ページA）の情報にアクセスされてしまう危険があります。

🚨 実際に起こり得るリスク

ページBが悪意あるサイトだった場合、window.opener.location = "https://phishing-site.com"のようにして、元のページ（ページA）を不正なサイトへリダイレクトさせることができます。これは「タブナビゲーションの脆弱性」とも呼ばれ、フィッシング詐欺やウイルス拡散の原因になることがあります。

✅ 安全な書き方 rel=”noopener noreferrer”を追加

セキュリティ対策として以下のように記述しましょう
この rel 属性がセキュリティを守る重要な役割を果たします

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>

✅ noopenerの効果

リンク先のページ（B）から window.opener を使って元ページ（A）にアクセスできなくなります。悪意あるスクリプトによるリダイレクト攻撃を防止します。処理を別スレッドに分けることで、パフォーマンスの向上にもつながります。

✅ noreferrerの効果

リンク先にリファラー情報（どこから来たか）を送信しません。遷移元ページのURLやクエリ情報などが外部に漏れることを防げます。一部ブラウザでは「noopener」単体では機能しない場合があるため、「noreferrer」を併用するのがベストです。

✅ パフォーマンス面のメリット

「noopener」を使うことで、リンク元とリンク先のページが別スレッドで処理されるようになります。これにより、リンク先で重たいスクリプトが動いても、リンク元のページに影響を与えにくくなります。

📌 まとめ

target="_blank" だけで外部リンクを開くのは危険！セキュリティ＆パフォーマンス対策として「rel="noopener noreferrer"」をセットで使うのが必須！フィッシング詐欺やリファラー漏洩を防ぐためにも、全ての外部リンクで意識して記述する習慣をつけよう！