タブナビング攻撃入門

概要

noreferrer属性がウェブセキュリティで重要な役割を果たすことをご存知ですか？このブログでは、noreferrer属性について詳しく説明し、プライバシー保護とタブナビング攻撃の防止における重要性を解説します。

タブナビング攻撃とは

タブナビングは、ユーザーが新しいタブでリンクを開いたときに、元のページが悪意のあるページに置き換えられるタイプのフィッシング攻撃です。

攻撃の仕組み

1. ユーザーが悪意のあるサイト上のリンクをクリック
2. 新しいタブが開く
3. 元のタブのページが密かにフィッシングページに変更される
4. ユーザーが元のタブに戻ると、偽のログインページが表示される
5. ユーザーが認証情報を入力すると、攻撃者に送信される

// 悪意のあるコード例
if (window.opener) {
  window.opener.location = 'https://fake-login.com';
}

防御方法

rel="noopener noreferrer"の使用

外部リンクには常にこれらの属性を追加してください：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部リンク
</a>

各属性の役割

• noopener: 新しいページがwindow.openerを通じて元のページにアクセスするのを防ぎます
• noreferrer: リファラー情報を送信しないようにし、noopenerの機能も含みます

Reactでの実装

function ExternalLink({ href, children }) {
  return (
    <a 
      href={href} 
      target="_blank" 
      rel="noopener noreferrer"
    >
      {children}
    </a>
  );
}

現代のブラウザ

最新のブラウザの多くは、target="_blank"リンクに対してデフォルトでnoopenerの動作を実装しています。しかし、古いブラウザとの互換性のために、明示的に属性を追加することが推奨されます。

結論

タブナビング攻撃は見過ごされがちですが、適切な防御策を講じることで簡単に防ぐことができます。すべての外部リンクにrel="noopener noreferrer"を追加することをお勧めします。