PR

外部リンクにはrel=”noopener noreferrer”を忘れずに

全般
この記事は約1分で読めます。
記事内に広告が含まれています。

Webページで外部サイトへのリンクを別タブで開く際、セキュリティ上の理由からrel属性の指定が推奨されています。外部リンクでtarget="_blank"を使う際は、必ずrel="noopener noreferrer"を付けましょう。

基本的な書き方

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイトへ
</a>

なぜ必要なのか

target="_blank"だけで別タブを開くと、リンク先のページがwindow.openerを通じて元のページを操作できてしまいます。

これにより、フィッシング詐欺などのセキュリティリスクが生じる可能性があります。

各属性の役割

  • noopener: リンク先がwindow.openerにアクセスできないようにする
  • noreferrer: リファラー情報を送信しない(古いブラウザ対応)

まとめ

外部リンクでtarget="_blank"を使う際は、必ずrel="noopener noreferrer"を付けましょう。セキュリティ対策として基本中の基本です。

コメント

タイトルとURLをコピーしました