目次
はじめに
外部リンクを新しいタブで開く際によく使う target="_blank" ですが、実はセキュリティリスクが存在します。今回はその問題点と対策について学習したことをまとめます。
target=”_blank” の問題点
window.opener による脆弱性
target="_blank" で新しいタブを開くと、開かれた新しいページは元のページへの参照（window.opener）を持ちます。
<!-- 問題のあるコード例 -->
<a href="https://external-site.com" target="_blank">外部サイト</a>
この状態だと、新しく開かれたページで以下のようなJavaScriptが実行される可能性があります：
// 悪意のあるサイトで実行されるコード
window.opener.location = 'https://malicious-site.com/fake-login';
具体的な攻撃シナリオ
- ユーザーがあなたのサイトから外部リンクをクリック
- 新しいタブで外部サイトが開く
- 外部サイト（悪意がある場合）が元のタブを偽のログインページにリダイレクト
- ユーザーが戻ったときに偽サイトでログイン情報を入力してしまう
これを Reverse Tabnabbing攻撃 と呼びます。
対策方法
rel=”noopener” の使用
<a href="https://external-site.com" target="_blank" rel="noopener">外部サイト</a>
window.openerへの参照を無効にする- 新しいページから元のページを操作できなくなる
rel=”noreferrer” の追加
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">外部サイト</a>
noopenerの効果に加えて- リファラー情報（どのサイトから来たか）も送信されない
- より強いプライバシー保護
現在のブラウザ対応状況
最新ブラウザの自動対応
- Chrome 88+ では
target="_blank"に自動的にnoopenerが適用 - Firefox、Safari も同様の対応を進めている
それでも明示的に書くべき理由
<!-- 推奨：明示的に記述 -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">外部サイト</a>
- 古いブラウザ対応: まだ自動適用されないブラウザが存在
- 明確性: コードを読む人に意図が伝わる
- 確実性: ブラウザの実装に依存しない
実装パターン
基本形
<!-- 最もよく使われる形 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部サイト
</a>
noopener のみ
<!-- リファラーを送信したい場合 -->
<a href="https://example.com" target="_blank" rel="noopener">
外部サイト（リファラー送信）
</a>
JavaScriptでの動的生成
// 動的にリンクを作成する場合
const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.textContent = '外部サイト';
まとめ
target="_blank"単体はセキュリティリスクがあるrel="noopener noreferrer"を追加してリスクを軽減- 最新ブラウザでは自動対応されているが、明示的に書くことを推奨
- 外部リンクを新しいタブで開く際は必ず意識すること
参考資料
最終更新: 2025年9月
