【実務・中級編】aタグのrel属性によるセキュリティ対策 – HTML実践ガイド

もしあなたが今日まで、この属性に何のセキュリティ対策も施していなかったなら……この記事を読み終える頃には、恐らく背筋が凍るはずです。なぜなら、そのリンクをクリックした瞬間に、あなたのサイトのユーザーが「悪意ある攻撃者」に操作されるリスクを放置している可能性があるからです。

今日は、中級エンジニアなら絶対に押さえておくべき `rel=”noopener”` と `rel=”noreferrer”` の真実について、現場の視点から深掘りします。

—

なぜ `target=”_blank”` は危険なのか？

原因は、ブラウザの仕様にあります。`target=”_blank”` を指定して別タブでリンクを開くと、新しいページ（遷移先）からは `window.opener` というプロパティを通じて、元のページ（遷移元）の `window` オブジェクトにアクセスできてしまいます。

裏側で何が起きているのか

攻撃者が管理するサイトにユーザーを誘導した場合、そのサイトのJavaScriptは以下のように元のページを書き換えることが可能です。

// 攻撃者のサイトで実行される悪意あるコード
if (window.opener) {
// 元のページをフィッシングサイトへ強制的にリダイレクトさせる
window.opener.location.href = ‘https://malicious-site.com/fake-login’;
}

ユーザーは「元のページを開いたまま別タブを見ている」つもりでも、実は元のページは既に攻撃者の手によって偽のログイン画面にすり替えられている……。これが `window.opener` を悪用した「タブ・ナッピング（Tabnabbing）」という攻撃手法です。

—

解決策：rel属性による「縁切り」

この脆弱性を防ぐために導入されたのが `rel=”noopener”` です。これを指定すると、ブラウザは新しいページに対して `window.opener` を `null` として渡します。つまり、遷移先から遷移元への制御を完全に遮断するわけです。

使い分けのベストプラクティス

• `rel=”noopener”`: 必須。`window.opener` へのアクセスを無効化します。現在のモダンブラウザでは、`target=”_blank”` を指定すると自動的に `noopener` が付与される仕様（Chromium系など）も増えていますが、非対応ブラウザへの保険として手動付与が鉄則です。
• `rel=”noreferrer”`: `noopener` の機能に加え、遷移先へ `Referer` ヘッダー（どのページから来たかという情報）を送らないようにします。プライバシーをより厳格に守りたい場合や、解析ツールに情報を渡したくない場合に併用します。

—

実践的サンプルコード

現場のプロジェクトでそのまま使える、セキュアなリンクの記述例です。Reactなどのコンポーネントライブラリでも、基本的な考え方は変わりません。