外部リンク

外部リンクのデモ

target="_blank" と rel="noopener noreferrer" を組み合わせた外部リンクの例。アイコンや視覚的な手がかりでユーザーに新タブで開くことを伝えるのが推奨される。

<!-- 基本形: rel="noopener noreferrer" は必須 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイト
</a>

<!-- アクセシビリティ: 新タブで開くことをスクリーンリーダーに伝える -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイト
  <span class="sr-only">（新しいタブで開く）</span>
</a>

/* スクリーンリーダー専用テキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

セキュリティ: タブナビング攻撃とは

rel="noopener noreferrer" を付けない場合、リンク先のページが window.opener を通じて元のページを操作できる脆弱性（タブナビング）が発生する。

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

// リンク先の悪意あるページが実行できること:
window.opener.location = "https://phishing.example";
// → 元タブを偽サイトにリダイレクト可能！

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

// window.opener は null になり、
// 元のページへのアクセスが不可能になる

<!-- noopener: window.opener を null にする -->
<!-- noreferrer: Refererヘッダーを送信しない（noopenerも含む） -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">外部リンク</a>

/* 現代のブラウザでは target="_blank" に自動で noopener が付与されるが、
   明示的に書くことで古いブラウザでも安全になる */

target 属性の値

target 属性はリンク先をどのコンテキストで開くかを指定する。

<!-- 新しいタブで開く -->
<a href="#" target="_blank" rel="noopener noreferrer">新しいタブ</a>

<!-- 現在のタブで開く（デフォルト） -->
<a href="#" target="_self">現在のタブ</a>

<!-- 親フレームで開く -->
<a href="#" target="_parent">親フレーム</a>

<!-- 最上位コンテキストで開く（全フレームを破壊） -->
<a href="#" target="_top">最上位</a>

referrerpolicy 属性

referrerpolicy 属性でリンク遷移時に送る Referer ヘッダーを細かく制御できる。rel="noreferrer" より詳細な設定が可能。

<!-- Refererを送らない -->
<a href="#" referrerpolicy="no-referrer">リンク</a>

<!-- オリジンのみ送る -->
<a href="#" referrerpolicy="origin">リンク</a>

<!-- rel="noreferrer" は referrerpolicy="no-referrer" と同等 + noopener も含む -->
<a href="#" target="_blank" rel="noopener noreferrer">リンク</a>

比較表: target 属性の値