ウェブサイトを運営する際、外部リンクを新しいタブで開くためにtarget="_blank"を使う場面はよくありますよね。

ですが、これにはちょっとした落とし穴があります。今回はその落とし穴と、それを防ぐ方法についてしっかり解説していきます。

target="_blank"の問題

「リンクを新しいタブで開くだけでしょ？」と思われるかもしれませんが、実はtarget="_blank"にはセキュリティのリスクが潜んでいます。

リンク先のページが、元のページの内容を勝手に変更できてしまう可能性があるのです。

ユーザーの信頼を守るためには、このリスクへの対策が欠かせません。

noreferrerとnoopenerを適切に設定しよう

この問題に対する対策としてよく使われるのが、rel属性のnoreferrerとnoopenerです。

まず、noopenerについて。これはリンク先のページから、元のページ（つまりリンクをクリックしたページ）へのアクセスを遮断します。具体的には、JavaScriptのwindow.openerオブジェクトを無効にする役割を果たします。

一方、noreferrerは、noopenerの機能に加えて「どこからこのリンクが開かれたか」というリファラ情報もリンク先に渡さないようにするものです。

つまり、両方併用すれば「リンク先から元のページが操作されない」「リファラ情報が渡らない」のダブル対策ができるわけです。

target="_blank"のセキュリティリスクと対策

タブナビゲーション攻撃のリスク

target="_blank"だけを設定したリンクをクリックすると、リンク先はwindow.openerを使って元のページをコントロールできる状態になります。

この機能を悪用して、リンク先のページが元のページの内容を偽装し、フィッシング詐欺などに利用される可能性があります。

たとえば、リンク先が「ログイン画面風の偽ページ」を元のタブに表示させて、ユーザーの入力情報を盗む…といった攻撃が可能なのです。

noopenerの役割

このリスクを防ぐために使われるのが、rel="noopener"です。

これを設定することで、リンク先のページはwindow.openerにアクセスできなくなります。

つまり、「元のページを操作できない」状態になります。

ただし、古いブラウザではnoopenerが効かないこともあるため、完全な防御とはいえません。

noreferrerの役割

一方、rel="noreferrer"は、noopenerと同様にwindow.openerを無効化するだけでなく、リファラ（参照元）情報もリンク先に渡さないようにします。

プライバシー保護の観点からもnoreferrerの使用は有効です。

また、noopenerがサポートされていない環境でも、noreferrerを使えば同様の効果が期待できるのもメリットです。

基本的なHTML記述方法

target=”_blank”の適切な書き方は以下になります。

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

具体例：WordPressとReactでの対応方法

WordPressの場合

WordPressでは、バージョン5.1以降、ビジュアルエディターでtarget="_blank"を使用すると、自動的にrel="noopener noreferrer"が追加されるようになっています。

これは非常に便利な仕様ですが、テーマやプラグインによってこの自動付与が無効になっていることもあるので注意が必要です。

また、WordPressでテーマカスタマイズで直接コートを編集する場合は、以下のように関数を作成し、記述すると便利です。

function target_blank() {
	return 'target="_blank" rel="noopener noreferrer"';
}

この関数を使用する時には以下のように記述します。

<a href="https://example.com" <?=target_blank()?>>

まとめ

target="_blank"は便利な一方で、セキュリティ上のリスクも含んでいます。

リンク先が元のページを操作できてしまう「タブナビゲーション攻撃」を防ぐには、rel="noopener noreferrer"の記述がとても重要です。

WordPressやReactなどのフレームワークでも、適切に設定すれば簡単に対策が可能です。

ぜひ皆さんも、自分のサイトのリンクを見直して、より安全なWeb体験を提供していきましょう！