WordPressで自動挿入されるrel="noopener"って何？

WordPress リンク設定で自動的に挿入されるrel=”noopener”について

WordPressでリンクを設定する際に、
「リンクを新しいタブで開く（target="_blank"）」にチェックを入れると、
自動的に「rel="noopener"」が挿入されます。

お気づきの方もいらっしゃると思いますが、
皆さん、この「rel="noopener"」の役割を理解されているでしょうか？

私は、恥ずかしながら、ぼんやりとしか理解していなかったのですが、
先日、知り合いから、この「rel="noopener"」って何？って聞かれたので、この機会に調べて簡単にまとめてみました。

「rel=”noopener”」の役割

「rel="noopener"」の役割には、
・脆弱性への対応
・パフォーマンス低下へ対応
の2つがあります。
参考サイト

私なりにもまとめておきます。

脆弱性への対応

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

参照：Tools for Web Developers

リンクを別窓（target="_blank"）で開くように設定すると、セキュリティー上の脆弱性が発生します。

例えば、
親画面（リンク元のページ）から別画面に遷移した際に、
その遷移先ページに window.opener.location = newURL が仕込まれていれば、
親画面が「newURL」に設定されたページに強制的に移動させられてしまいます。

つまり、リンク先ページからリンク元ページを操作できてしまいます。

その遷移先ページが、フィッシング詐欺サイトのような悪意に満ちたものであれば、被害を被る方も出てくるかもしれませんね。

その対策として、<a>タグに別窓（target="_blank"）でリンクを設定する場合には、
「rel="noopener"」を設定しておくことをおすすめします。

パフォーマンス低下へ対応

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

参照：Tools for Web Developers

説明通り、リンク先で高負荷なJavascriptが実行されてしまうと、リンク元ページのパフォーマンスへも影響するようです。

そちらへの対策にもなるようです。

まとめ

「rel="noopener"」の役割は、リンクタグ（<a>）に「target="_blank"」を設定した場合の、
脆弱性への対応とパフォーマンス低下へ対応です。

<a>タグには、「target="_blank"」と「rel="noopener"」をセットで設定するようにしましょう！