HTMLのリンクで新しいタブを開くときによく使われる属性が、target="_blank" です。
しかし、この属性には意外なセキュリティ上のリスクがあることをご存じでしょうか？
本記事では、target="_blank"の脆弱性と安全な対策方法を初心者にも分かりやすく解説します。
知らないまま使うと危険なケースもあるため、Web制作者はぜひ押さえておきましょう。
target="_blank"とは？
target="_blank" は、リンクをクリックした際に新しいタブ（またはウィンドウ）で開くためのHTML属性です。
たとえば次のように書くと、新しいタブでリンク先を開けます。
<a href="https://nameko.online" target="_blank">なめこオンライン</a>便利な機能ですが、実はこれだけだとセキュリティの脆弱性が発生します。
脆弱性の内容：「タブナビング攻撃」
target="_blank" だけを指定した場合、リンク先ページは window.opener というオブジェクトを介して、元ページを操作できてしまう状態になります。
悪意のあるサイトがリンク先だった場合、次のような攻撃が可能になります。
このような攻撃は タブナビング（tabnabbing）と呼ばれています。
対策方法：rel="noopener noreferrer"を追加する
この脆弱性を防ぐ最も簡単な方法は、aタグに rel="noopener noreferrer" を追加することです。
<a href="https://nameko.online" target="_blank" rel="noopener noreferrer">なめこオンライン</a>これにより、リンク先から window.opener へのアクセスが遮断され、元のページを改ざんできなくなります。
各属性の意味
- noopener：元ページとの参照関係を断つ（安全対策のメイン）
- noreferrer：リファラー（遷移元URL）を送信しない（プライバシー保護にも有効）
WordPressやフレームワークでは自動対応されている場合も
最近のWordPressや一部のJSフレームワーク（React, Vueなど）では、
エディターやビルド時に自動で rel="noopener noreferrer" が追加されることがあります。
ただし、古いテーマやプラグインを使っている場合は自動で追加されないこともあるため、
ソースコードを確認しておくことが大切です。
まとめ
target="_blank" は便利な反面、タブナビング攻撃という脆弱性を引き起こす可能性があります。
安全に使うためには、必ず rel="noopener noreferrer" をセットで指定しましょう。
コメント