noopenerとnoreferrerについて改めて考える

今回は、普段何気なく使っているnoopenerとnoreferrerについて、改めて詳しく調べてみたので記録として残しておきます。
HTML書いてる人なら「あーはいはい、あれね」と思うかもしれませんが、自分自身も意外と理解が曖昧だったので、自分の頭の整理も兼ねています。

気づけば毎回書いていた属性たち

正直なところ、私はこれまでリンクを書くとき「target="_blank"を使ったらrel="noopener noreferrer"も付けるもの」くらいの認識で、なんとなく習慣で書いていました。でも改めて考えると、これらの属性って何をしているんでしょうか？

基本的な違いを整理してみた

noopener: 新しく開いたページがwindow.openerを使って元ページを操作できないようにブロックします（あのタブナビングってやつですね）
noreferrer: リファラー情報（どこからアクセスしたか）を相手に送らないようにします。ついでにnoopenerの機能も含まれています

実際どう使い分けるべきなの？

これまで私は「念のため両方書いておこう」という感じでしたが、実際どう使うのが正しいのでしょうか。

<!-- noopenerだけの場合 -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- noreferrerだけの場合 -->
<a href="https://example.com" target="_blank" rel="noreferrer">Example</a>

<!-- 両方使う場合（私はこれが習慣になっていました） -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

copy

改めて調べてわかった重要性

セキュリティの面で

調べてみると、target="_blank"だけだと「タブナビング」という攻撃に弱いことがわかりました。これは新しく開いたページがwindow.openerを使って元のページを悪意のあるサイトにリダイレクトさせるテクニックです。怖いですね…。

プライバシーの観点から

noreferrerを使うと、「このサイトからアクセスしました」という情報を送らなくなります。アクセス解析ツールでは「直接アクセス」と判断されるので、場合によってはSEO的に影響があるかもしれません。

最近のブラウザ事情

実は最近のChrome、Safari、Firefoxなどでは、target="_blank"に対して自動的にnoopenerが適用されるようになっているんですね。知りませんでした…。ただ、全ブラウザで統一されているわけではないので、明示的に書くのがベターだと思います。

使う上での注意点（自分用メモ）

SEOへの配慮: noreferrerを使うと相手のサイトにリファラー情報が行かないので、アフィリエイトなど解析が重要な場合は考慮が必要かも。
古いブラウザ: IEとかだと一部サポートされていないケースもあるらしい（そもそもIE…）。
使い分け: 社内リンクや自分のサイト内リンクなら不要だけど、外部サイト、特に信頼性がわからないサイトへのリンクには積極的に使っていきたい。

結局どうするのがベスト？

改めて調べた結果、私は今後も外部リンクにはrel="noopener noreferrer"をセットで使っていこうと思います。セキュリティとプライバシーの両面で安全性が高まりますし、コピペのテンプレート的にもこれが一番楽です（笑）。
でも状況によっては使い分けも検討してみます。例えば自分のブログからアフィリエイトリンクを貼る場合はrel="noopener"だけにして、リファラー情報は送るようにするとか。
こういった細かい部分も意識して書いていくと、より良いウェブ制作につながるんだろうなと実感しました。