投稿時に自動付加されるrel=noopener noreferrerを制御するWordPressカスタマイズ方法

WordPress5.1でリンクに関する仕様変更がありました。

それは、投稿の保存時に「target=”_blank”」属性があるAタグに対して「rel=”noopener noreferrer”」が強制的に付加されるというものです。

新しいタブで開くリンクのrel属性にnoopenerが付加されてしまうのは、セキュリティー的観点から見ても当然かもしれません。

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 LINK TEXT のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without ...

ただ、noreferrerまで自動付加されてしまうと、ちょっと困ったことになります。

例えば、リンクがアフィリエイトリンクだった場合だと「どのページからコンバージョンされたのか?」が分かるリファラが取得できなくなってしまう場合もあります。

リファラが取得できない

今回は、この問題に対応するために「投稿をポストしてもnoreferrerを強制付加しない方法」を紹介します。

noopenerは現時点では、Chrome、Firefox、Safari、Opera以外には対応していません。それ以外のブラウザに対応させるにはnoreferrerも付加しておく必要があります。すると、そうするとをリファラが取得できない…。ここらへんは難しい選択かと思います。セキュリティー面を考えるのであれば、変更しないことをおすすめします。
詳細は以下を参照してください。
【対策】「noopener noreferrer」の自動付与の問題点は? | わかるWeb
スポンサーリンク
レクタングル(大)広告

カスタマイズ方法

テーマ側からカスタマイズする場合は、子テーマのfunctions.phpに以下のコードを貼り付けます。

tiny_mce_before_initフック

最初の「tiny_mce_before_init」フックは、エディター側で「rel=”noopener noreferrer”」が自動付加されるのを防いでいます。

wp_targeted_link_relフック

「wp_targeted_link_rel」フックが、WordPress5.1からの機能です。

デフォルト動作だと、『「target=”_blank”」属性がついたリンク』に対して投稿をポストした時点で「rel=”noopener noreferrer”」を付加します(※内部リンク、外部リンクかかわらず「target=”_blank”」属性がついたリンクには付加されます)。

デフォルトの第一引数$rel_valueには「noopener noreferrer」という値が入っています。

フック関数によって、この「noopener noreferrer」から「 noreferrer」を取り除いて「noopener」のみにするという処理を行っています。

最終的には「rel=”noopener”」という属性が出力されます。

セキュリティー的に問題があると思いますが、noopenerも出力させたくない場合は、フック関数の返り値にnull(もしくは空文字)を返すことで実現できます。
wp_targeted_link_relフックの関数は、「target=”_blank”」属性がついたリンクに対してのみ実行されます。

動作確認

例えば、以下のようなリンクタグを投稿画面で保存したとします。

デフォルト動作

デフォルト動作だと投稿を保存した際「target=”_blank”」属性がついたリンクに「rel=”noopener noreferrer”」が自動付加されます。

カスタマイズ後の動作

けれど、今回のカスタマイズを行った場合、「target=”_blank”」属性がついたリンクに対して「rel=”noopener”」のみが自動付加されます。

ブロックエディター(Gutenberg)を利用している場合は、投稿をポストしても画面遷移が行われないので、タグ自体は変わりません。タグ変更を確認するには、画面の再読み込み(リロード)を行なう必要があります。

まとめ

今回のカスタマイズで投稿ポスト時に「target=”_blank”」がついたリンクに対してrel属性の変更を制御出来るかと思います。

ただ、今回のカスタマイズを行っても、既に投稿がポストされてしまったものは変更できませんでした。

既に「rel=”noopener noreferrer”」がついてしまったリンクは、手動で修正するか、コードを書いて置換するかで対応するしかないかと思います。

修正が面倒であれば以下のような、一括置換プラグインでまとめて変更するというのもありかもしれません。

Search Regex adds a powerful set of search and replace functions to WordPress that go beyond the standard searching capabilities, with full regex supp …
プラグインを用いた一括置換は、手順を誤るとコンテンツ表示に重大な問題が出る恐れもあります。実行前は必ずデータベースのバックアップを取って元に戻せる体制を整えておく必要があります。

『投稿時に自動付加されるrel=noopener noreferrerを制御するWordPressカスタマイズ方法』へのコメント

  1. 名前:TM_BB 投稿日:2019/03/01(金) 11:43:22 ID:c206cea1c

    わいひら様
    いつもお世話になっています。
    別テーマ(テンプレートキングさんの FSVBASIC)に放り込んでもバッチリでした。
    ありがとうございます。

  2. わいひら 名前:わいひら 投稿日:2019/03/01(金) 22:12:15 ID:5be266357

    うまくいったようでよかったです^^
    一応、当ページのサンプルコードはWordPress公式テーマでテストしているので、大抵のテーマであれば動作するかと思います。

  3. 名前:ひろちん 投稿日:2019/03/13(水) 23:27:18 ID:bc05c4039

    報酬発生元が全く分からなくなり困っていました。違うテーマですがこちらの記事で解決できました。
    NOOPENERだけ残すという理想形が実現できました。
    ありがとうございます!

  4. わいひら 名前:わいひら 投稿日:2019/03/14(木) 10:54:42 ID:6a3299e02

    noopenerだけだと、古いブラウザのセキュリティーに万全とは言えませんが、noreferrerを付加してリファラが取得できなくなるのは、アフィリエイトとかをやっているとキツイですよね…。
    「target=”_blank”」をつけないという手もありますが、やはり外部リンクは新しいタブで開きたいですし。

  5. 名前:すももん 投稿日:2019/03/31(日) 22:39:08 ID:14332d5ec

    はじめまして。いつも参考にさせて頂いております。

    WordPress5.1以降の対応で既にポストされた「rel=”noopener noreferrer”」を取り除くコードを教えて頂けないでしょうか?

    WordPress4.7.4で既にポストされた「rel=”noopener noreferrer”」を取り除くコードでは変更できなかったもので・・・。色々調べたのですが見つからなかったのでお手数ですがコピペでいけるコードを書いて頂けませんか?

  6. 名前:すももん 投稿日:2019/03/31(日) 23:28:43 ID:14332d5ec

    連投ですいません。解決できました。Search Regexを使って置き換えできました!

  7. わいひら 名前:わいひら 投稿日:2019/04/04(木) 13:04:27 ID:9f3a0ab37

    そうなんです。
    文末にもあるようにすでに挿入されてしまった属性はSearch Regexで一括置換するのが最も手っ取り早いかと思います。
    もしくは、the_contentフックをフィルターフックして、適切な置換処理を加えるかとかしかないかと思います。

    とりあえず、うまくいったようで良かったです。

  8. 名前:みるみ 投稿日:2019/08/18(日) 12:22:31 ID:bb8d0b2cb

    わいひらさん、いつもお世話になっております。みるみです。
    今回はCocoonには関係ない話なのでこちらで失礼致します。

    例のtarget=”_blank”問題は全く気にしていなくて、全然別の事情で今この記事を拝見していたのですが、記事中にあった

    noopenerは現時点では、Chrome、Firefox、Safari、Opera以外には対応していません。それ以外のブラウザに対応させるにはnoreferrerも付加しておく必要があります。

    について少し教えていただけませんか。

    ここで言っているChromeやSafari(他の2つもですが)は、PCでもスマホでもという理解でいいのでしょうか?
    この情報を調べるソースがどこにあるか分からず、さっとググっただけでは分からなかったため質問させていただきました。

    よろしくお願いいたします。

    P.S.
    ちなみに「対応していません」というのは「noreferrerがないとtarget=”_blank”が機能しない(別タブで開かない)」ということを言っているのですよね?
    弊害がそれだけなら対応ブラウザ以外のことも考えるメリットは薄いと思っているのでこのままこの記事の施策を実行するつもりです。

  9. わいひら 名前:わいひら 投稿日:2019/08/18(日) 20:16:54 ID:1e96690e2

    こんにちは。

    詳しくはここなどがわかりやすいかと思います。
    【対策】「noopener noreferrer」の自動付与の問題点は? | わかるWeb
    rel=”noreferrer” – chocotakaの日記

    Chrome、Firefox、Safari、Operaでは、noopenerをつければOKだけど、IEやEdgeでは対応していないので、そちらでも対応させるのであれば、noreferrerも付けたほうが良いということです。
    ただしnoreferrerをつけると、リファラが取れなくなるのが問題点です。

    ちなみに「対応していません」というのは「noreferrerがないとtarget=”_blank”が機能しない(別タブで開かない)」ということを言っているのですよね?

    これは、Chrome、Firefox、Safari、Opera以外では、noopenerをつけてもセキュリティー問題に対応できないという意味です。別タブでは開きます。
    IEやEdgeでもセキュリティの脆弱性に対応するのであれば、noreferrerをつける必要があるという意味です。

  10. 名前:みるみ 投稿日:2019/08/19(月) 19:48:51 ID:2c8fb8747

    ありがとうございます。

    普通に考えたらGoogleAnalyticsなどと同じように、ブラウザはPCもスマホも同じものを指していると思って良さそうですね。
    セキュリティの件についても理解できました。ありがとうございます。

    総合的に鑑みてこの記事の関数はやはり使わせていただきたく思います。
    今回もお世話になりました。

    引き続きよろしくお願い致します!

  11. わいひら 名前:わいひら 投稿日:2019/08/23(金) 22:39:47 ID:0327a8fe4

    ここで言っているChromeやSafari(他の2つもですが)は、PCでもスマホでもという理解でいいのでしょうか?

    これに答えていませんでしたね^^;
    Can I useでは、Chrome for Android、Firefox for Androidとは別カテゴリになっていますが、対応は同じぽいので、同じと考えてよいかと思います。
    https://caniuse.com/#search=rel%3Dnoopener
    https://caniuse.com/#search=noreferrer

  12. 名前:みるみ 投稿日:2019/08/24(土) 10:46:37 ID:0cdf7b213

    そこはこっちで理解してくれ、という受け取りをしていました。笑
    わざわざご返答いただきありがとうございます。

    Can I useでHTMLの属性と属性値も調べられるんですね!!(cssでしか使ったことがなかった)
    またひとつ勉強になりました。ありがとうございました!

  13. 名前:わたぼん 投稿日:2019/09/06(金) 13:38:49 ID:e930e70c6

    いつも貴重な情報をご提供下さり、ありがとうございます。今回も本当に助かりました。
    ところで、既に「rel=”noopener noreferrer”」がついてしまったリンクは、手動で修正するか、一括変換プラグインを使うしかない・・・とのお話でしたが、私の場合「functions.php」にお教え頂いたコードを貼っただけで既存のリンクも修正されているようです。
    どれを確認しても「noreferrer」だけが消えています。リンクの遷移も正常です。
    手間が省けて嬉しい限りではありますが、こういうものなんでしょうか?
    嬉しい反面、妙に気になってしまい、コメントさせて頂きました。
    ちなみにWordPressのヴァージョンは最新の「5.2.3」です。
    まずは御礼まで。どうもありがとうございました。よろしくお願い申し上げます。

  14. わいひら 名前:わいひら 投稿日:2019/09/08(日) 22:02:39 ID:ce78319c9

    以前は、そうなっていなかったので書いたと思うのですが、もしかしたらバージョンが上がったことにより、そのようになったのかもしれません。
    ただ、上記のものは、エディターによって属性が付加されないようにするものだったので、エディターによって付加されていないものは問題なかったのかもしれません。
    いずれにせよ、実物を見てみないと何とも言えないかもしれません。

    動作に問題がないのであれば、それで全然問題ないと思います。