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

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

基本的な書き方

&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;
  外部サイトへ
&lt;/a&gt;

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

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

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

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