こんにちは！コーダーのゆうしです。
外部サイトへのリンクを別タブで開くときに target="_blank" を使いますよね。実はこれだけだとセキュリティ上のリスクがあります。この記事では target="_blank" の脆弱性と対策として rel="noopener noreferrer" を追加する理由を解説します。コーディングの際に毎回意識しておきたい内容です。
target属性の基本
<a href="https://example.com">同じタブで開く</a>target 属性を省略するとデフォルトで同じタブにリンク先が表示されます。target="_self" と書いても同じ動作ですが、省略するほうがシンプルです。
別タブで開く
<a href="https://example.com" target="_blank">別タブで開く</a>target="_blank" を指定するとクリックしたとき新しいタブでリンク先が表示されます。外部サイトへのリンク・PDFファイルへのリンクなどで使うことが多いです。
target=”_blank”の脆弱性
target="_blank" だけでリンクを設置すると、セキュリティ上の問題が生じる可能性があります。
リンク先のページから window.opener というJavaScriptのオブジェクトを使って、リンク元のページにアクセスできてしまうのが問題です。
具体的には以下のような悪意のある操作が可能になります。
// リンク先のページからリンク元のURLを書き換えられる
window.opener.location = 'https://フィッシングサイト.com';ユーザーがリンクをクリックして別タブを見ている間に、元のタブが偽サイトにリダイレクトされてしまうという攻撃手法です。これをリバースタブナビゲーションと呼びます。
対策：rel=”noopener noreferrer”を追加する
<a href="https://example.com" target="_blank" rel="noopener noreferrer">別タブで開く</a>target="_blank" を使う場合は必ず rel="noopener noreferrer" をセットで追加してください。
noopenerとnoreferrerの違い
| 属性値 | 効果 |
|---|---|
| noopener | window.opener を無効化してリンク先からリンク元へのアクセスを防ぐ |
| noreferrer | noopener の効果に加え、リファラー情報（どこからアクセスしたか）も送信しない |
noreferrer は noopener の効果も含んでいるため、どちらか片方だけでも対策になりますが、古いブラウザへの対応を考えて両方書いておくのが安全です。
パフォーマンスへの影響
セキュリティ面だけでなく、パフォーマンス面でも rel="noopener" を追加するメリットがあります。
target="_blank" でリンクを開くと、デフォルトではリンク元とリンク先が同じプロセスで動作します。リンク先のページで処理の重いJavaScriptが実行されると、元のページのパフォーマンスにも影響が出ることがあります。
rel="noopener" を追加することでリンク先が別プロセスで動作するようになり、元のページへの影響を防げます。
現代のブラウザでは自動対応されている
Chrome 88以降・Firefox・Safariなどの現代のブラウザでは、target="_blank" に自動で noopener が適用されるようになっています。そのため現時点では古いブラウザを使っているユーザーへの対応でなければ、セキュリティリスクはほぼ解消されています。
ただし古い環境へのサポートが必要なプロジェクトや、コードの意図を明示するためにも rel="noopener noreferrer" を明示的に書く習慣をつけておくことをおすすめします。
noopener・noreferrer以外のrel属性
rel 属性には他にも使われる値があります。
| 値 | 内容 |
|---|---|
| noopener | window.openerを無効化 |
| noreferrer | リファラー情報を送信しない＋noopenerの効果も含む |
| nofollow | 検索エンジンにリンク先を評価させない。広告・スポンサーリンクに使う |
| sponsored | 有料リンク・広告リンクに使う |
| ugc | ユーザー生成コンテンツ（コメント・掲示板など）のリンクに使う |
外部リンクに nofollow を付けるかどうかはサイトの方針によりますが、広告・スポンサーリンクには sponsored を付けることがGoogleから推奨されています。
まとめ
target="_blank" を使うときは rel="noopener noreferrer" をセットで付ける、これを習慣にしておきましょう。現代のブラウザでは自動対応されていますが、明示的に書いておくことでコードの意図が伝わりやすくなります。特に外部リンクを多く含むサイトでは意識しておきたいポイントです。
ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。
