WordPress(WP)

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

関連記事

  1. WordPress(WP)

    WP(WordPress)

    WordPressで英語対応

    WordPressを使って英語サイトを作成している時、困るのが日付…

  2. WordPress(WP)

    WP(WordPress)

    WP リビジョンの無効化について

    WordPressには、リビジョンと呼ばれる記事のバックアップ機能…

  3. WordPress(WP)

    WP(WordPress)

    「WordPress JSON REST API」を使って記事を取得です。

    今週は個人的に「JSON REST API」週間と銘打っているので、…

  4. WordPress(WP)

    WP(WordPress)

    WP アイキャッチ機能なんてものが追加されていた!!

    WordPress3.oからアイキャッチなどというものが追加されていま…

  5. WordPress(WP)

    WP(WordPress)

    WP 「query_posts()」でページナビが誤作動を!!

    WordPressで特定カテゴリーの記事のみを表示させたくて、&l…

  6. WordPress(WP)

    WP(WordPress)

    WordPressのバージョンアップ(2.6.5から3.4.2へ)です

    最近業者さんからWordPressのバージョンアップ依頼があったので、…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP