Googleのエンジニア「target=”_blank” にはセキュリティ上の脆弱性もあります」

グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって！？

グーグルのエンジニアが警告、「別タブで開く」リンクは実はヤバいんだって！？【SEO情報まとめ】[Web担当者Forum]

「リンクにtarget=”_blank”を指定するとセキュリティとパフォーマンスの点で問題があるので、rel=”noopener” 属性または rel=”noreferrer” 属性と併用したほうがいい」という情報を、グーグルのエンジニアがツイートしている。

ヒント：他のサイトへのリンクのtarget = “_ blank”は、サイトをパフォーマンスとセキュリティの問題にさらす可能性があります。 修正するには、次のリンクにrel = “noopener”またはrel = “noreferrer”を追加します。http：//bit.ly/relnoop

Tip: target=”_blank” on links to other sites can expose your site to performance and security issues. To fix, add rel=”noopener” or rel=”noreferrer” to these links: https://t.co/HdA7ooNzx5 ✅ pic.twitter.com/T7X5r7MKWz

— Addy Osmani (@addyosmani) March 1, 2020

外部サイトへのリンクに rel=”noopener” を追加すべき理由には
セキュリティ
パフォーマンス
の2つがあり、グーグルのデベロッパーサイトで詳しく説明している。
セキュリティのほうは、次のとおりだ。

『また、target=”_blank” にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。』

target=”_blank”のリンクは別タブ（別ウィンドウ）で開かれる。ということは、必ずリンク元のページとリンク先のページの両方がブラウザ内に存在している。
そして、そのようにして開かれたリンク先のページに悪意をもったJavaScriptが記載されていれば、リンク元であるあなたのページを好きに改ざんされてしまう可能性があるのだ。
もう1つのパフォーマンスに関しては、次のように書かれている。

『target=”_blank” を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。』

ただし、編集部で確認したところ現在のブラウザでは target=”_blank” でのリンクでも、必ずしも同じプロセスで新しいタブが開かれるわけではないようだ。

そのため、target=”_blank” がついた（信用できるとは限らない外部向け）リンクには、rel=”noopener” を付け加えることを原則としておくのがいいだろう。
さらに、たとえば社内情報共有システムやイントラネットから外部サイトへのリンクでは、rel=”noreferrer” を使うのもいいだろう。その場合、rel=”noopener noreferrer” のように記述すればいい。

こうしておけば、そのリンクをたどってもブラウザはアクセス先のサーバーにリファラーを送信しない。そのため、アクセス解析データやログデータから「なるほど、この会社では内部ネットワーク名がこういう命名パターンなのか」「内部ネットワークにこういうホスト名でWebサーバーが動いているのか」といったことをリンク先サイトの管理者に知られなくて済む。

サイトで rel=”noopener” を使用して外部アンカーを開く

サイトで rel=”noopener” を使用して外部アンカーを開く[Googleデベロッパーサイトで]
https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

SEOコンサルタントのまとめ

ワードプレスだと、自動的に「rel=”noopener” 」がついてきますよね。