aタグの「noopener」「noreferrer」って何？

HTMLを書き始めると、
リンクを作るときに必ず出てくるのが aタグ です。

例えばこんなやつ。

<a href="https://example.com" target="_blank">リンク</a>

で、ある日こう言われます。

target=”_blank” を使うなら、
rel=”noopener noreferrer” も付けてください。

……ん？
なにそれ？

今日はこの
「noopener」と「noreferrer」って何？」問題
を整理していきます。

まずは target=”_blank” の話

target="_blank" は、リンクを別タブで開くための指定です。

ユーザー体験としては便利ですよね。

• 外部サイトを開く
• 元ページはそのまま残る

よく使います。

でも、ここに落とし穴があります。

何が問題なの？

target="_blank" を付けると、

開いた先のページから
元のページ（window.opener）にアクセスできてしまう
という仕様があります。

これを悪用すると、開いたページ側が

• 元ページを書き換える
• 別のURLにリダイレクトさせる

といったことが可能になります。

いわゆる
タブナビング（Tabnabbing）攻撃
と呼ばれるものです。

つまり、「別タブで開くだけ」のつもりが、

セキュリティリスクを持っている

ということです。

noopener とは？

rel="noopener" を付けると、

新しく開いたページから
window.opener を使えなくなります。

つまり、

元ページへのアクセスを遮断する

ための指定です。

<a href="https://example.com" target="_blank" rel="noopener">

これだけで、
Tabnabbing対策になります。

現代のブラウザでは
target="_blank" に自動でnoopener相当が入るケースもありますが、
明示的に書くのがベストプラクティスです。

noreferrer とは？

rel="noreferrer" は、

リンク先に対して
リファラー情報（どこから来たか）を送らない
指定です。

通常、リンクをクリックすると、

「このページから来ましたよ」

という情報が送られます。

これを送らないようにするのが
noreferrer です。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">

じゃあ、両方必要なの？

よくある疑問です。

基本的には

rel="noopener noreferrer"

と両方付けるのが一般的です。

理由はシンプルで、

• noopener → セキュリティ対策
• noreferrer → 情報送信を防ぐ

という役割があり、セットで使われることが多いからです。

WordPressでも、
外部リンクを別タブにすると自動で付与されることがあります。

これ、試験用の知識じゃありません

初心者の頃、

「なんかおまじないみたいに付いてる属性」

くらいに思っていました。

でも実務では、

• セキュリティレビュー
• コーディング規約
• WPCSやlintチェック

などで普通に指摘されます。

つまりこれは、

ちゃんと意味がある実務知識です。

まとめ

• target=”_blank” にはリスクがある
• noopener は window.opener を無効化
• noreferrer はリファラーを送らない
• 基本は rel=”noopener noreferrer” をセットで使う

HTMLはシンプルに見えて、
裏側にはちゃんと理由があります。

「なんとなく書いてるコード」を
「理解して書けるコード」に変えていくと、
一段レベルが上がります。

これからWeb制作を目指す方は、
こういう細かいところも少しずつ理解していきましょう。

地味ですが、確実に力になります。

ではでは。