Web制作で知っておきたいリンクの安全対策 target=_blank と noopener の関係

Web制作の現場では、外部リンクを新しいタブで開きたい場合に target=”_blank” をよく使用します。
しかし、そのまま使うとセキュリティ上のリスクが発生することがあります。
その際に必要になるのが noopener です。
この記事では、target=”_blank” と noopener の関係、リスクと対策についてわかりやすく解説します。

target=”_blank”

target=”_blank” は、リンクをクリックした際に新しいタブやウィンドウでページを開くための属性です。
ユーザーが元のページを残したまま外部ページを参照できるため、サイト離脱防止の目的で外部リンクでよく使われます。

target=”_blank” と window.opener のリスク

target=”_blank” を使用すると、リンク先のページがリンク元のページにアクセスできる状態が作られます。
これを window.opener と呼びます。

• ・元ページ（親ページ） → window
• ・新しいタブ（子ページ） → window.opener を通じて親ページにアクセス可能

つまり、新しいタブ（子ページ）から親ページを操作できる状態が作られてしまいます。
 
リスクの具体例：

• ・悪意のある外部サイトに飛ばされると、window.opener.location = “https://phishingsite.com” のように書かれて親ページを勝手に書き換えられる
• ・ユーザーは知らないうちに別サイトに誘導される

対策：noopener と noreferrer

外部リンクでは、rel=”noopener noreferrer” を付与してリスクを防ぎます。

noopener（ノーオープナー）

新しいページから元ページにアクセスできなくします（window.opener を参照不可にします）。

noreferrer（ノーリファラー）

リファラ情報（参照元URL）を渡さないようにします。
 
注意点：分析への影響

• ・内部リンク（自分のサイト内でのリンク）には原則使用しない
• ・リファラ情報が取得できなくなるため、Google Analytics などのアクセス解析で参照元が不明になる

現在の主要なブラウザでは、noopener が自動的に付与される

Firefox、Safari、Chrome などの主要ブラウザでは、target=”_blank” が使用された際に、自動的に noopener 属性が付与されます。
そのため、開発者が明示的に noopener をコードに追加しなくても、ブラウザ側でセキュリティ保護が適用されます。

まとめ

• ・target=”_blank” を使用する場合は、セキュリティ対策として rel=”noopener noreferrer” を付与する
• ・noreferrer はアクセス解析に影響するため、使用する際には注意が必要
• ・現在の主要なブラウザでは自動的に noopener が付与される

target=”_blank” と noopener の関係を理解しておくことで、UX・セキュリティ・解析の観点から安心してリンクを運用できます。