rel=”noopener noreferrer”はなぜ必要？target=”_blank”の安全対策を初心者向けに徹底解説

WEB制作 2026.02.03

「外部リンクにtarget="_blank"を使うときは、rel="noopener noreferrer"も一緒に書いてね」と言われて、よくわからないままコピペしていませんか？

実は、target=”_blank”だけを使うと、セキュリティやパフォーマンス上のリスクが発生する可能性があるんです。WordPressなどのCMSでは自動的に付与されますが、手書きコーディングでは自分で正しく記述する必要があります。

この記事で分かること:

target=”_blank”に潜むセキュリティリスク「タブハイジャック」とは何か
rel=”noopener”とrel=”noreferrer”の違いと役割
実務で使える正しい外部リンクの書き方と判断基準

この記事を読めば、なぜこの記述が必要なのか理論的に理解でき、自信を持ってコーディングできるようになります！

結論:target=”_blank”には必ずrel=”noopener”を付けよう

まず結論: 外部サイトへのリンクで新しいタブを開く場合、セキュリティとパフォーマンスのため、必ずrel=”noopener”を追加するのが現代の標準です。

すぐに使える安全な外部リンクの書き方:

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

重要なポイント3つ:

noopener: セキュリティリスク「タブハイジャック」を防ぐ(必須)
noreferrer: リンク元情報を隠す(プライバシー保護・任意)
最新ブラウザ: 2021年以降は自動的にnoopenerが適用されるが、互換性のため明示的に書くのがベスト

target=”_blank”だけだと何が危険なのか？

window.openerによる「タブハイジャック」とは

target="_blank"で新しいタブを開くと、開かれた側のページから、元のページ(あなたのサイト)を操作できてしまうという問題があります。これを「タブハイジャック」と呼びます。

具体的な攻撃シナリオ:

あなたのサイトに悪意のある外部リンクが設置される(または意図せず悪質サイトにリンク)
ユーザーがそのリンクをクリックし、新しいタブで外部サイトが開く
外部サイト側でwindow.opener.locationを使い、元のタブ(あなたのサイト)を偽のフィッシングサイトに書き換える
ユーザーが元のタブに戻ると、見た目が同じ偽サイトが表示されている
ユーザーが個人情報を入力してしまう

攻撃コードの例(悪意のある外部サイト側):

// 外部サイト(悪意のあるページ)のJavaScript
if(window.opener) {
  // 元のタブ(リンク元)を偽サイトに書き換える
  window.opener.location = 'https://fake-phishing-site.com';
}

注意: この攻撃は、信頼できるサイトにリンクしている場合でも、そのサイトが乗っ取られたり、意図せず悪意のあるスクリプトが埋め込まれた場合に発生する可能性があります。

パフォーマンスへの悪影響

セキュリティだけでなく、パフォーマンス面でも問題があります。

同じプロセスで実行: target=”_blank”だけの場合、新しいタブは元のタブと同じブラウザプロセスで動作
リソースの競合: 外部サイトが重い処理をすると、元のタブ(あなたのサイト)も遅くなる
メモリ消費: 不要な参照が残り、メモリリークの原因になることも

rel="noopener"を付けると、新しいタブが別プロセスで開かれ、お互いに影響しないようになります。

rel=”noopener”とrel=”noreferrer”の違いを理解する

rel=”noopener”の役割

noopenerは、新しいタブから元のタブへのアクセスを遮断する属性です。

具体的な効果:

window.openerがnullになる
外部サイトから元のページを操作できなくなる(タブハイジャック防止)
別プロセスで開かれるため、パフォーマンスが向上
リファラー(参照元情報)は送信される

<!-- noopenerのみの場合 -->
<a href="https://example.com" target="_blank" rel="noopener">
  外部サイトへ
</a>
 
<!-- ↓外部サイト側では -->
<!-- window.opener は null になる -->
<!-- ただし、リファラーは送信される(どのページから来たかわかる) -->

rel=”noreferrer”の役割

noreferrerは、リンク元の情報(リファラー)を外部サイトに送信しない属性です。

具体的な効果:

HTTPリクエストヘッダーのRefererが送信されない
外部サイトのアクセス解析で「どのページから来たか」がわからなくなる
noopenerの効果も自動的に含まれる(古いブラウザでも)
プライバシー保護に有効

<!-- noreferrerのみの場合 -->
<a href="https://example.com" target="_blank" rel="noreferrer">
  外部サイトへ
</a>
 
<!-- ↓外部サイト側では -->
<!-- window.opener は null になる -->
<!-- リファラーも送信されない(どこから来たか不明) -->

両方を組み合わせる理由

実務では「noopener noreferrer」を両方書くのが一般的です。理由は以下の通り:

理由	説明
ブラウザ互換性	古いブラウザではnoopenerが効かないことがあるが、noreferrerならnoopener効果も得られる
明示的な意図	「セキュリティ対策(noopener)」と「プライバシー保護(noreferrer)」の意図を明確に示せる
将来の保険	ブラウザの仕様変更に備え、両方書いておく方が安全
コードの可読性	何のために書いているかが他の開発者にも伝わりやすい

<!-- ✅ 推奨:両方書く -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイトへ
</a>

実務での正しい使い方と判断基準

外部リンクの基本パターン

実務でそのまま使える、状況別のコード例です。

<!-- パターン1:一般的な外部リンク(最も多いケース) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイトを見る
</a>
 
<!-- パターン2:リファラーを送りたい外部リンク(提携先など) -->
<a href="https://partner-site.com" target="_blank" rel="noopener">
  提携サイトへ
</a>
 
<!-- パターン3:同じタブで開く外部リンク -->
<a href="https://example.com">
  外部サイトへ(rel不要)
</a>
 
<!-- パターン4:内部リンクを新しいタブで開く(PDFなど) -->
<a href="/files/document.pdf" target="_blank">
  PDFを開く(rel不要)
</a>

判断のポイント:

外部サイト + target=”_blank”: rel="noopener noreferrer" を必ず付ける
内部リンク + target=”_blank”: rel属性は不要(同じドメインなので安全)
外部サイト + 同じタブ: rel属性は不要(window.openerが発生しないため)

アフィリエイトリンクの場合

アフィリエイトリンクでは、リファラー情報が計測に必要な場合があります。

<!-- アフィリエイトリンク:noreferrerは付けない -->
<a href="https://affiliate.example.com?id=12345" 
   target="_blank" 
   rel="noopener"> <!-- noreferrerは外す -->
  商品を見る
</a>

注意: ただし、アフィリエイトプログラムによっては独自のトラッキングIDで計測するため、noreferrerを付けても問題ない場合もあります。各サービスの仕様を確認しましょう。

SEO対策としてのrel属性

外部リンクには、SEO目的でrel属性を追加することがあります。

<!-- 信頼できる外部サイトへのリンク -->
<a href="https://trusted-site.com" 
   target="_blank" 
   rel="noopener noreferrer">
  参考サイト
</a>
 
<!-- 広告・スポンサーリンク -->
<a href="https://sponsor.com" 
   target="_blank" 
   rel="noopener noreferrer sponsored"> <!-- sponsoredを追加 -->
  PR:スポンサー
</a>
 
<!-- UGC(ユーザー生成コンテンツ)のリンク -->
<a href="https://user-link.com" 
   target="_blank" 
   rel="noopener noreferrer ugc"> <!-- ugcを追加 -->
  ユーザー投稿リンク
</a>

SEO関連のrel属性:

sponsored: 広告・スポンサーリンクであることをGoogleに伝える
ugc: ユーザー生成コンテンツ(コメント欄など)であることを示す
nofollow: リンク先の評価を渡さない(現在はsponsored/ugcの使用が推奨)

これらはスペース区切りで複数指定できます。

よくあるつまずきポイントと解決法

1. rel属性の書き方が間違っている

<!-- ❌ 悪い例:カンマ区切り -->
<a href="https://example.com" target="_blank" rel="noopener,noreferrer">
 
<!-- ❌ 悪い例:複数のrel属性 -->
<a href="https://example.com" target="_blank" rel="noopener" rel="noreferrer">
 
<!-- ✅ 良い例:スペース区切り、1つのrel属性 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">

ポイント: rel属性の値はスペース区切りで複数指定します。カンマや複数のrel属性はNGです。

2. 内部リンクにもrel属性を付けてしまう

<!-- ❌ 不要:内部リンクには不要 -->
<a href="/about.html" target="_blank" rel="noopener noreferrer">
  会社概要
</a>
 
<!-- ✅ 正しい:内部リンクならrel不要 -->
<a href="/about.html" target="_blank">
  会社概要
</a>

理由: 同じドメイン内のリンクなら、window.openerがあっても安全です(自分のサイトなので)。rel属性は外部リンクにのみ必要です。

3. target=”_blank”を使わない方がいい場合もある

実は、必ずしもtarget=”_blank”を使う必要はありません。UX(ユーザー体験)の観点から、使わない方が良い場合もあります。

target=”_blank”を避けるべきケース:

モバイル: タブが増えすぎて管理が大変になる
短い記事・ページ: 戻るボタンで十分な場合
ユーザーの選択を尊重: ブラウザのCtrl+クリック(新しいタブで開く)に任せる

<!-- 場合によってはtarget="_blank"なしでもOK -->
<a href="https://example.com">
  外部サイトへ(同じタブで開く)
</a>

target=”_blank”を使うべきケース:

フォーム入力中に参考資料を見せたい場合
PDFやダウンロードファイル
長文記事の参考リンク

実務チェックリスト

外部リンクを実装する前に、このチェックリストで確認しましょう。

target=”_blank”を使う場合、rel=”noopener noreferrer”を付けたか
→ セキュリティとプライバシー保護のため必須
内部リンクには不要なrel属性を付けていないか
→ 同じドメインならrel属性は不要
アフィリエイトリンクの場合、noreferrerの要否を確認したか
→ トラッキングに影響する可能性があるため、仕様を確認
rel属性の書き方は正しいか(スペース区切り)
→ カンマ区切りや複数のrel属性はNG
そもそもtarget=”_blank”が本当に必要か検討したか
→ UXの観点から、使わない方が良い場合もある
外部リンクであることをユーザーに伝えているか
→ アイコンや「別タブで開く」などのテキストを追加するとより親切

よくある質問

Q1. WordPressやCMSが自動で付けてくれるなら、手書きでは不要ですか?

A. 手書きコーディングでは必ず自分で書く必要があります。WordPressは「Gutenbergエディター」や「クラシックエディター」で外部リンクを挿入すると自動的に付与してくれますが、HTMLを直接書く場合は自動では追加されません。また、古いCMSやカスタムコードでは付与されないこともあるため、必ず確認しましょう。

Q2. rel=”noopener”だけでも十分ですか?noreferrerは必須ですか?

A. セキュリティ面ではrel=”noopener”だけで十分です。ただし、古いブラウザ対応やプライバシー保護の観点から、両方書くのが一般的です。noreferrerを付けることで:

古いブラウザでもnoopener効果が得られる
リンク元情報を隠せる(プライバシー保護)
コードの意図が明確になる

という利点があります。

Q3. JavaScriptでwindow.openを使う場合はどうすればいいですか?

A. JavaScriptでも同様に対策が必要です。

// ❌ 危険:window.openerが残る
window.open('https://example.com');
 
// ✅ 安全:第3引数でnoopenerを指定
window.open('https://example.com', '_blank', 'noopener,noreferrer');
 
// または、開いた後にopenerを無効化
const newWindow = window.open('https://example.com');
newWindow.opener = null;

Q4. Google Analyticsのトラッキングに影響はありますか?

A. Google Analyticsのトラッキングには影響しません。rel=”noreferrer”を付けても、Google Analytics側では自分のサイト内の行動(どのリンクをクリックしたか)は計測できます。影響を受けるのは「リンク先のサイト」のアクセス解析で、「どこから来たか(リファラー)」がわからなくなるだけです。

Q5. すべてのリンクをチェックするのは大変です。効率的な方法はありますか?

A. 以下の方法で効率化できます。

エディタの検索機能: target="_blank"で検索し、rel属性があるか確認
HTMLバリデーター: W3Cのバリデーターで警告が出る
ブラウザ拡張機能: リンクチェッカーで一括確認
コーディング規約: チーム内でテンプレートやスニペットを用意
JavaScriptで一括修正: 既存サイトなら、JSで自動付与する方法もある

// 既存サイトでの一括修正例(応急処置)
document.querySelectorAll('a[target="_blank"]').forEach(link => {
  const rel = link.getAttribute('rel') || '';
  if(!rel.includes('noopener')) {
    link.setAttribute('rel', 'noopener noreferrer ' + rel);
  }
});

注意: JavaScriptでの修正は応急処置です。HTMLを直接修正するのが根本的な解決策です。

まとめ

target="_blank"で外部リンクを開く場合、rel=”noopener noreferrer”を必ず付けるのが現代のWeb制作の常識です。この記事のポイントをおさらいしましょう。

セキュリティリスク: target=”_blank”だけだと「タブハイジャック」攻撃のリスクがある
noopenerの役割: window.openerを無効化し、セキュリティとパフォーマンスを向上
noreferrerの役割: リファラー情報を隠し、プライバシーを保護(古いブラウザ対応にも有効)
実務の基本: 外部リンク + target=”_blank” = rel=”noopener noreferrer”
最新ブラウザ: 自動で保護されるが、明示的に書くのがベストプラクティス

今日から実践できること:

既存のコードでtarget="_blank"を検索し、rel属性があるかチェック
エディタにスニペット登録して、自動で正しいコードが挿入されるようにする
チーム内でコーディング規約を確認・共有する

次のステップ:

HTMLのセキュリティ全般(XSS、CSRFなど)についても学ぶ
アクセシビリティの観点から、外部リンクにアイコンやテキストを追加する方法を学ぶ
JavaScriptのセキュリティベストプラクティスを理解する

最初は「なんとなくコピペ」していたrel="noopener noreferrer"も、その意味を理解すれば、自信を持って実装できるようになります。セキュリティは小さな積み重ねが大切です。この記事で学んだ知識を、ぜひ実際のコーディングで活かしてください！