# 2026年4月時点で、\<a>タグへ「target="_blank"」付与する際、追加で「rel="noopener"」は必要？不要な場合と必要な場合それぞれの理由を解説して。ついでに「noreferrer」についても要・不要とその理由を解説して。 結論から言うと、**2026年4月時点では、通常の `<a target="_blank">` に対して追加の `rel="noopener"` は、現代ブラウザ前提なら機能上はほぼ不要** です。 MDN は `<a>` について、`target="_blank"` を付けると **暗黙的に `rel="noopener"` と同じ挙動になり、`window.opener` を設定しない**と案内しています。WHATWG HTML Standard でも、`noopener` / `noreferrer` / `opener` の意味が整理されており、`noreferrer` は `noopener` を含む扱いです。 ([MDN Web Docs][1]) 先に整理すると、 * **`noopener`** = 開いた先から `window.opener` で元ページを触れないようにする。 * **`noreferrer`** = `Referer` ヘッダーを送らない。さらに **`noopener` も含む**。 --- ## `rel="noopener"` が不要な場合 **現代ブラウザだけを対象にした、普通の外部リンクの `_blank`** なら、追加しなくても実害はほぼありません。 MDN の `<a>` と `<area>` と `<form>` の説明では、`target="_blank"` は `noopener` 相当の挙動を暗黙に持つとされています。つまり、昔問題だった **reverse tabnabbing** 対策としての `noopener` は、2026年時点ではブラウザ側でかなり吸収されています。 ([MDN Web Docs][1]) 実務的にはこうです。 ```html <a href="https://example.com" target="_blank">外部サイト</a> ``` この書き方でも、**今どきの主要ブラウザでは opener が切れる前提で見てよい**です。 ([MDN Web Docs][1]) --- ## それでも `rel="noopener"` を付ける意味がある場合 機能上は不要でも、**明示しておく価値はあります**。理由は3つです。 **1つ目**は、**コードの意図が一目で分かる**ことです。 「これは新規タブを開くが opener は渡さない」という設計意図が、レビュー時に明確になります。これは仕様というより運用上のメリットです。 **2つ目**は、**古いブラウザや古いWebViewを少しでも視野に入れる場合の保険**になることです。 WHATWG の dev 版互換表や MDN の過去情報でも、`noopener` 自体は古めのブラウザでは差があり、古い IE 系では弱い時期がありました。2026年に一般企業サイトで IE を主対象にすることはほぼないですが、閉域端末や古い組み込みWebViewが混ざる職場なら、**書いておいて損は少ない**です。 ([HTML Living Standard][3]) **3つ目**は、**`_blank` 以外でも opener を切りたいケース**です。 WHATWG 仕様では、`rel=noopener` は単に `_blank` の補足ではなく、**新しいトップレベル閲覧コンテキストを auxiliary browsing context にしない**ための指定です。つまり、名前付き target などでも opener を持たせたくない設計なら、`rel=noopener` 自体に意味があります。 ([HTML Living Standard][3]) なので実務判断としては、 **現代ブラウザ前提なら “必須ではない” が、コーディング規約として付けるのは普通にアリ**、です。 --- ## 逆に `noopener` が必要な場合 2026年時点でも、次のような場面では「必要寄り」と考えていいです。 * **古いブラウザ / 古いWebView互換を少しでも気にする** * **lintルールや社内規約で明示を求める** * **`_blank` 以外の target でも opener を切りたい** * **セキュリティレビューで“暗黙挙動に依存しない”方針を取る** つまり、「ブラウザがやってくれるから省略」でも成立はするけど、 **企業の実装ルールとしては明示のほうが説明しやすい**です。 ## `noreferrer` は要るか ここは `noopener` と違って、**かなり用途次第**です。 ### `noreferrer` が不要な場合 ふつうの企業サイトやLPでは、**まず不要**です。 理由は2つあります。 **1つ目**は、**デフォルトの Referrer-Policy がすでにかなり控えめ**だからです。 MDN では、現在の既定は **`strict-origin-when-cross-origin`** で、クロスオリジンへの HTTPS→HTTPS では **オリジンのみ** を送り、HTTPS→HTTP では送らない、とされています。つまり昔より、最初から漏れ方は抑えられています。 ([MDN Web Docs][4]) **2つ目**は、**計測や流入元分析が壊れやすい**からです。 `noreferrer` を付けると `Referer` ヘッダーを送らないので、相手側のアクセス解析では「どこから来たか」が見えにくくなります。外部送客、提携先、メディア掲載、アフィリエイト、効果測定の文脈では、むやみに付けると不都合が出ます。`noreferrer` は仕様上、単に `noopener` の強化ではなく、**参照元情報を消す**指定です。 ([MDN Web Docs][5]) ### `noreferrer` が必要な場合 次のようなときは意味があります。 * **遷移先に参照元を絶対に渡したくない** * **URLパスやクエリに機微情報が乗る可能性がある** * **外部サービスに組織名や内部パスをなるべく見せたくない** * **法務・セキュリティ・プライバシー要件で referrer を切る必要がある** `noreferrer` は、仕様上 **`Referer` を送らず、さらに `noopener` と同じ効果も持つ**ので、「referrer を完全に切りたい」ならこれ1つで足ります。 ([MDN Web Docs][5]) --- ## 実務上のおすすめ ### 1. ふつうの外部リンク これで十分です。 ```html <a href="https://example.com" target="_blank" rel="noopener">外部サイト</a> ``` 2026年時点では `noopener` は機能上ほぼ冗長ですが、**明示しておくとレビューしやすい**です。 ([MDN Web Docs][1]) ### 2. referrer を絶対に渡したくない外部リンク このときは `noreferrer` を使います。 ```html <a href="https://example.com" target="_blank" rel="noreferrer">外部サイト</a> ``` `noreferrer` は `noopener` を含むので、**`rel="noreferrer noopener"` と両方書いても冗長**です。 ([MDN Web Docs][5]) ### 3. `noreferrer` を安易に全リンクへ付けない 理由は、**相手側の解析や送客計測を消す**からです。 「セキュリティのため全部 `noreferrer`」は、2026年時点では雑です。多くのケースでは、まずは既定の `strict-origin-when-cross-origin` で十分です。 ([MDN Web Docs][4]) --- ## ひとことでまとめると * **`target="_blank"` に追加の `rel="noopener"`** → **現代ブラウザ前提なら必須ではない**。でも、**明示するのは still good practice**。 ([MDN Web Docs][1]) * **`rel="noreferrer"`** → **必要なときだけ付ける**。付けると **referrer が消え、かつ noopener も効く**。計測や送客分析に影響するので、全件一律はおすすめしにくい。 ([MDN Web Docs][5]) --- [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a?utm_source=chatgpt.com "<a>: The Anchor element - HTML - MDN Web Docs" [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/noopener?utm_source=chatgpt.com "rel=\"noopener\" - HTML - MDN Web Docs - Mozilla" [3]: https://html.spec.whatwg.org/dev/links.html "HTML Standard, Edition for Web Developers" [4]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Referrer-Policy?utm_source=chatgpt.com "Referrer-Policy header - HTTP - MDN Web Docs" [5]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/noreferrer?utm_source=chatgpt.com "rel=\"noreferrer\" - HTML - MDN Web Docs - Mozilla"