WP:WordPress(ワードプレス)

WP(WordPress)

WPで自動挿入される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"」をセットで設定するようにしましょう!

WordPress短期学習プログラム

関連記事

  1. WP(WordPress)

    WP管理画面から不要メニューを削除

    WPを使用した案件の場合、投稿者用のアカウントを発行してお客さんに…

  2. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP アイキャッチ画像を管理画面の投稿一覧に表示

    前回の記事、アイキャッチ機能の追加の続きになるのですが、WordP…

  3. WP:WordPress(ワードプレス)

    WP(WordPress)

    何もやらないよりかはマシ!?

    WordPressでブログを構築させて頂いてる業者さんから、「au…

  4. WP:WordPress(ワードプレス)

    WP(WordPress)

    zenbackをWordPressにインストール!!

    WordPressにzenbackをインストールしてみました。&n…

  5. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP ZIPファイルからプラグインをインストール

    ダウンロードしたZIP形式のファイルからプラグインをインストールしてみ…

  6. WP:WordPress(ワードプレス)

    WP(WordPress)

    【WordPress】is_page()で固定ページかどうかの判定

    is_page()で固定ページの判定固定ページかどうか…

最近の記事

  1. CakePHP
  2. PHP(ピー・エイチ・ピー)
  3. PHP(ピー・エイチ・ピー)
  4. PHP(ピー・エイチ・ピー)
  5. WP:WordPress(ワードプレス)
  6. WP:WordPress(ワードプレス)
  7. WP:WordPress(ワードプレス)
  8. Security(セキュリティ)
  9. WP:WordPress(ワードプレス)
  10. WP:WordPress(ワードプレス)
PAGE TOP