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

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. セキュリティ

    WP(WordPress)

    【WordPress】アクセス制限を掛けておくべきファイルのまとめ

    WordPressのアクセス制限を掛けておくべきファイルをまと…

  2. SSL(HTTPS通信)

    WP(WordPress)

    「お問合せフォーム」のみHTTPSで通信したい!!

    某業者さんのサイトをWPで組んでいるのですが、SSLを取得している…

  3. セキュリティ
  4. WordPress(WP)

    WP(WordPress)

    「WordPress JSON REST API」を使って、記事一覧を表示

    「JSON REST API」を使って、取得したブログ記事の一覧を…

  5. WordPress(WP)

    WP(WordPress)

    プラグイン「WP Basic Auth」で公開ページにベーシック認証を設定

    個人のメモ書き用にインストールしているWordPressがあるのですが…

  6. Check Copy Contents(CCC)

最近の記事

  1. レンタルサーバ
  2. コピペ(Copy and Paste)
  3. Check Copy Contents(CCC)
  4. WordPress(WP)
  5. セキュリティ
  6. セキュリティ
  7. THE THOR(ザ・トール)
  8. SONY α6400の本体
  9. THE THOR(ザ・トール)
  10. 短縮URL
PAGE TOP