WP:WordPress(ワードプレス)

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"」をセットで設定するようにしましょう!

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. SEO対策とは
  2. SE(システムエンジニア)
  3. カメラ
  4. アクセス解析
  5. ファイアウォール
  6. 一眼レフカメラ
  7. システム開発用のアイキャッチ
  8. FTPサーバー
  9. システム開発用のアイキャッチ
  10. Warning
PAGE TOP