【実務・中級編】target=_blank使用時のセキュリティ対策 – HTML実践ガイド

「別タブで開く」というUIはUXの文脈で議論が分かれるところですが、実装するならば、現代のWebエンジニアとして最低限守らなければならない「セキュリティの鉄則」があります。今回は、なぜ `rel=”noopener”` や `rel=”noreferrer”` が必須なのか、ブラウザの裏側で何が起きているのかを深掘りします。

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

結論から言うと、最大の理由は「リンク先ページから、リンク元ページを操作できてしまう」という脆弱性にあります。

`target=”_blank”` を使って新しいタブを開くと、ブラウザは新しいページに対して `window.opener` というプロパティを付与します。これを通じて、リンク先（新しいタブ）のJavaScriptから、リンク元（元のタブ）のオブジェクトにアクセスできてしまうのです。

実際に起きること

1. あなたのサイトから、悪意のある外部サイトへ `target=”_blank”` でリンクする。
2. 悪意のあるサイト側で、`window.opener.location.href = ‘https://phishing-site.com’` のようなスクリプトを走らせる。
3. ユーザーが元のタブに戻ったとき、そこには見覚えのないフィッシングサイトが表示されている。

これは非常に古典的ですが、今なお有効な「UI偽装攻撃（Tabnabbing）」の一種です。ユーザーの信頼を損なうだけでなく、重大なセキュリティ事故に直結します。

ブラウザはどう処理しているのか

ブラウザの仕組みを少しだけ解剖しましょう。

`window.opener` は、リンク先ページが元のページと同じオリジン（ドメインやポート）である場合に、相互に連携を取りやすくするための仕様でした。しかし、現代のWebにおいては、外部サイトへのリンクがデフォルトでこの「特権」を持ってしまうのはリスクが高すぎます。

そこで登場するのが `rel` 属性です。

• `rel=”noopener”`: これを付与すると、ブラウザは `window.opener` を `null` に設定します。つまり、リンク先ページは元のページを一切操作できなくなります。これが現代の標準的なセキュリティ対策です。
• `rel=”noreferrer”`: `noopener` の機能に加え、HTTPリファラー（どのページから遷移してきたかの情報）を送信しなくなります。プライバシーをより厳重に守りたい場合に有効ですが、解析ツール（Google Analyticsなど）で参照元が見えなくなるというトレードオフがあります。

実務で使い分けるためのベストプラクティス

正直なところ、現代のWeb開発において「とりあえず `target=”_blank”` を使う」ときは、何も考えずに `rel=”noopener noreferrer”` をセットで書くのが正解です。

以下に、実務でそのまま使える安全な実装パターンを提示します。