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 を変更したりできます。
リンクを別窓（target="_blank"）で開くように設定すると、セキュリティー上の脆弱性が発生します。
例えば、
親画面（リンク元のページ）から別画面に遷移した際に、
その遷移先ページに window.opener.location = newURL が仕込まれていれば、
親画面が「newURL」に設定されたページに強制的に移動させられてしまいます。
つまり、リンク先ページからリンク元ページを操作できてしまいます。
その遷移先ページが、フィッシング詐欺サイトのような悪意に満ちたものであれば、被害を被る方も出てくるかもしれませんね。
その対策として、<a>タグに別窓（target="_blank"）でリンクを設定する場合には、
「rel="noopener"」を設定しておくことをおすすめします。
パフォーマンス低下へ対応
target="_blank" を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。
説明通り、リンク先で高負荷なJavascriptが実行されてしまうと、リンク元ページのパフォーマンスへも影響するようです。
そちらへの対策にもなるようです。
まとめ
「rel="noopener"」の役割は、リンクタグ（<a>）に「target="_blank"」を設定した場合の、
脆弱性への対応とパフォーマンス低下へ対応です。
<a>タグには、「target="_blank"」と「rel="noopener"」をセットで設定するようにしましょう！
