別タブで開くリンクのセキュリティ対策

Posted at 2026-03-29

はじめに

外部リンクを target="_blank" で別タブに開く実装はよく使われるが、セキュリティ上のリスクがあります。
この記事では、リスクの仕組みと正しい対策方法をまとめます。

target="_blank" で開かれた新しいタブは、デフォルトで元のページへの参照（window.opener）を持つ。
攻撃者はこの参照を利用して、元のページのURLを書き換えることができる。

// 悪意のあるサイト側のコード例
if (window.opener) {
  window.opener.location = "https://fake-login.example.com";
}

ユーザーから見ると元のタブのURLが変わっただけなので、攻撃に気づきにくいのが特徴。

window.opener への参照を null にし、新しいタブから元のページを操作できなくする。

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

リファラー情報（どのページからアクセスしてきたか）を送信しない。noopener の効果も含む。

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

リファラー（Referrer）とは
HTTPリクエストヘッダーに含まれる、遷移元ページのURL情報。
アクセス解析に利用されるが、プライバシー保護の観点から送信しないことが望ましい場合がある。
noreferrer を指定すると、リンク先にこの情報が渡らなくなる。

noreferrer だけでも noopener の効果を含むが、両方指定することで意図が明確になり、ブラウザ間の挙動差も吸収できる。

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

window.open を使う場合も noopener を指定する。

// ✅ noopenerを指定
window.open("https://example.com", "_blank", "noopener,noreferrer");

// ❌ 指定なし（window.openerが渡ってしまう）
window.open("https://example.com", "_blank");

// 外部リンク用コンポーネント
const ExternalLink = ({ href, children }) => (
  <a href={href} target="_blank" rel="noopener noreferrer">
    {children}
  </a>
);

eslint-plugin-react を使えば、rel 属性の付け忘れを自動で検出できる。

{
  "rules": {
    "react/jsx-no-target-blank": "error"
  }
}

2021年以降のモダンブラウザでは、target="_blank" を指定すると自動的に noopener が適用されるようになっている。

すべてのリンクに一律で付ける必要はない。以下のケースでは対策は不要。

オリジン（Origin）は、URLの「スキーム（プロトコル）」「ホスト（ドメイン）」「ポート番号」の3つの組み合わせのこと