Blog スタッフブログ

外部リンクを新しいタブで開くときに使う target="_blank"。実はそのままだとセキュリティリスク（タブナビング）や情報送信の意図せぬ副作用があります。この記事では、それを防ぐための rel="noopener noreferrer" の意味と使い分け、そして実務でそのまま使える書き方をご紹介します。

なぜ設定するのか？

noopener の役割

新しく開いたページから元ページへアクセスできる window.opener を無効化します。

これによりリバースタブナビング（開いた先のページが window.opener.location を書き換えてフィッシングへ誘導）を防止します。

noreferrer の役割

遷移先サイトへ送る Referer ヘッダー（遷移元URL）を送信しないようにします。

使用例

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

このように target="_blank"とセットで設定します。