WordPressエディターが自動付加するrel="noopener noreferrer"を除去する方法

先日、アフィリエイトリンクのリファラ（参照元）が急に取得できなくなりました。

原因を探ってみたら、どうやらWordpress4.7.4で、とあるセキュリティー対策が実装されたからのようです。

WordPressのrel=”noopener noreferrer”自動付加によって起きる問題 | トレードステーションと株・FX自動売買で暮らす

WordPress 4.7.4から、セキュリティ対策のためにある機能が実装されました。 外部リンクにtarget=”_blank”が指定されていると、（つまり、「リンクを新しいタブ...

auto-ts.net

セキュリティー問題詳細に関してはこちら。

リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

本サイト以下全ての target=_blank 付きのリンクに rel="noopener noreferrer" の付与を実施した。このプロパティの意味と、これが無い場合のフィッシング詐欺攻撃の可能性について解説する。

blog.jxck.io

どうやら、外部リンクに「target=”_blank”（リンクを新しいタブで開く）」が指定されていると、そのリンクに対して「rel=”noopener noreferrer”」属性が自動的に付加されるので、参照元が取得できなくなるようです。

ただ、リファラ（参照元）が取得できた方が何かと便利です。加えて、アフィリエイトサービスによっては、リファラ情報がないと成果が発生しないケースも考えられます（アフィリエイトURLにIDとかがなくリファラで判断するASPの場合）。

なので、一旦設定を元に戻して「自分のサイトにどのような影響が出るか？」を確かめるため、「rel=”noopener noreferrer”を無効にするコード」を書いたので紹介です。

rel=”noopener noreferrer”を無効にするコード

とりあえず、「rel=”noopener noreferrer”」属性の自動付加を解除したい場合は、以下のコードをfunctions.phpにコピペします。

//ビジュアルエディターでrel="noopener noreferrer"自動付加の解除
function tinymce_allow_unsafe_link_target_demo( $mce_init ) {
 $mce_init['allow_unsafe_link_target']=true;
 return $mce_init;
}
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target_demo');

//本文からnoopener noreferrerを取り除く
function remove_noopener_and_noreferrer_demo($the_content){
  $the_content = str_replace(' rel="nofollow noopener noreferrer"', ' rel="nofollow"', $the_content);
  $the_content = str_replace(' rel="noopener noreferrer"', '', $the_content);
  return $the_content;
}
add_filter('the_content', 'remove_noopener_and_noreferrer_demo', 9999);

以下では、それぞれのコードの役割について簡単に説明します。

ビジュアルエディターで「rel=”noopener noreferrer”」が自動付加されるのを解除

最初の関数は、ビジュアルエディターで属性が勝手に付加されるのを防ぎます。

//ビジュアルエディターでrel="noopener noreferrer"自動付加の解除
function tinymce_allow_unsafe_link_target_demo( $mce_init ) {
 $mce_init['allow_unsafe_link_target']=true;
 return $mce_init;
}
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target_demo');

例えば、ビジュアルエディターに以下のような、「target=”_blank”」属性のついた外部リンクを貼り付けたととします。

<a href="https://nelog.jp/" target="_blank">寝ログ</a>

すると、ビジュアルエディター側で自動的に以下のようにrel属性が付加されます。

<a href="https://nelog.jp/" target="_blank" rel="noopener noreferrer">寝ログ</a>

こんな感じ。

tinymce_allow_unsafe_link_target_demo関数では、上記のようなビジュアルエディターによる自動編集機能をオフにしています。

参考 Topic: Remove rel = “noopener noreferrer” in wordpress 4.7.4 « WordPress.org Forums

既にポストされた「rel=”noopener noreferrer”」を取り除く

tinymce_allow_unsafe_link_target_demo関数では、ビジュアルエディターの自動編集は無効にできます。

ただ既に「rel=”noopener noreferrer”」が付いたリンクをポストしてしまった場合、rel属性は、そのままになります。

ですので本文中から「rel=”noopener noreferrer”」を取り除く以下のようなコードが必要になります。

//本文からnoopener noreferrerを取り除く
function remove_noopener_and_noreferrer_demo($the_content){
  $the_content = str_replace(' rel="nofollow noopener noreferrer"', ' rel="nofollow"', $the_content);
  $the_content = str_replace(' rel="noopener noreferrer"', '', $the_content);
  return $the_content;
}
add_filter('the_content', 'remove_noopener_and_noreferrer_demo', 9999);

これは、単に本文中から「rel=”noopener noreferrer”」を取り除いているだけです。

あと、nofollowがついていた場合は、「rel=”nofollow noopener noreferrer”」→「rel=”nofollow”」となるように変更しています。

注意点

WordPress4.7.4で行われたセキュリティー対策である、「rel=”noopener noreferrer”」の自動付加は、当然必要だから追加された機能です。

なので、今回のカスタマイズを行うことにより、セキュリティー対策機能が一つオフになるわけですから、あまり好ましいことではありません。

ですので、以下のような用途でもない限り、あまりカスタマイズはおすすめしません。

• リファラ（参照元）情報が必要なASPを利用しているのでnoopener noreferrerはオフにしたい
• どうしてもアフィリエイトリンク等のリファラ情報は取得したい
• noopener noreferrerで自分のサイトに影響が出ていないか一旦機能をオフにして確認したい

僕も、しばらく動作確認した後は、元に戻すかと思います。

まとめ

とりあえず、今回紹介したコードをコピペしただけで、「rel=”noopener noreferrer”」の自動付加機能が追加される前の状態には戻ると思います。

ただ、注意点でも書きましたが、セキュリティー機能が1つ強制的に無効にされていることになります。ですので、動作確認後、「必ずしも必要ない」と判断した場合は、コピペ部分を削除して元に戻すことをおすすめします。

WordPress5.1以降の対応

WordPress5.1以降の「rel=”noopener noreferrer”」の対処法は以下を参照してください。

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

WordPress5.1でリンクに関する仕様変更がありました。それは、投稿の保存時に「target=”_blank”」属性が...

nelog.jp

2019-08-18 20:19