ACF 6.2.7以降でのHTMLエスケープの仕様変更への対応方法まとめ

WordPressを利用している方の中でもかなりの方が利用しているのではないかと思われる有名プラグイン「Advanced Custom Fields」ですが、まだ最新版にアップデートしていない方の管理画面にはこういったアラートが出ているのではないでしょうか?

わたしも長年ACFを利用していますが、こういったアラートはおそらく初めて見たため何事か!?と驚いてしまったのですが、簡単に言うと「the_field()the_sub_field()で出力する内容に対してHTMLエスケープかけるようにするね!」という仕様変更に関するお知らせです。

と、書くとなんか大変なことじゃないような気がしてくるのですが、実はこのthe_field()the_sub_field()って、ACFで入力した値をお手軽に表示するための関数なので、めちゃくちゃお世話になっている関数だったりします。なので管理画面にアラートを出してまでお知らせしてくれていたようです。

この記事では本変更でどういった問題が出るのか?・対応が必要な場合の対応方法について簡単にまとめます。

参考記事はこちらです。

目次

今回の変更で具体的にどういった問題が出るのか?

  • ACF 6.2.5以降
    • ショートコードで[acf field="field_name"] などのショートコードが出力する内容がwp_kses() という関数経由でHTMLエスケープ・特定のタグを除去して表示されるようになりました
  • ACF 6.2.7以降
    • the_field()the_sub_field() で出力する内容もwp_kses() 経由でHTMLエスケープ・特定のタグを除去して表示されるように変更になりました

wp_kses()esc_html()のように一概にすべてエスケープしたりするのではなく、functions.php等である程度ルールをハンドリングできるかたちでエスケープしてくれる関数なので、問題があった時に比較的対応しやすいものではあります。

ただ、使い方次第ではこれまでいい感じに出力されていた部分がwp_kses() によってがっつりエスケープや除去をされてしまった…なんていうこともあります。
具体的には本変更でこういった問題が起こります。

影響を受ける例①

ACFでサイト全体のheadタグ・bodyタグ直下・bodyタグの閉じタグ直前などにGoogleAnalyticsやタグマネージャーなどのタグを入れられるようにカスタマイズしてる!

→scriptタグが除去&エスケープされてしまうので、画面上に謎の文字列が表示されたり、GAタグやタグマネージャーのタグがお仕事をしていない…!ということが発生します

影響を受ける例②

ACFで記事ごとにGoogleMapの地図のiframeタグを入れられるようにしてる!

→iframeタグが除去されてしまうので表示されなくなってしまいます

逆に、下記のような使い方をしている分には本変更による影響を受けることはありません。

影響を受けない例①

ACFでチェックボックスを作って、おすすめ記事として抽出するのに使ってる!

→今回関係あるのは特定のHTMLタグを含む文字列に対してなので、BooleanやNumberなどの型を返すような場合は影響を受けることはありません

影響を受けない例②

ACFで価格などのフィールドを作って表示させてる!

→値の中にHTMLタグを含まない場合は問題なく表示されます

the_field() を使って直接値を表示したりせず、get_field()とかの今回の対象になっていない関数を利用して取得・表示している場合も影響を受けません(影響を受けない例①とかがそうですね)

対応が必要だった!どうしたらいいの?

ばっちり影響を受けてしまった!という場合、対応方法としては2つのやり方があります。

【おすすめ】the_field()ではなくget_field()を利用する

アナウンスがあったのはthe_field() などのようにechoを伴わずとも出力が可能な関数に対してなので、get_field() などの本変更の対象ではない関数を利用するようにすると、これまで通りのかたちで出力されるようになります。

<?php 
  //ACF 6.2.7以降 the_field()はHTMLエスケープされる
  the_field('field_name');

  //HTMLエスケープなしで値をそのまま出力
  echo get_field('field_name');
?>

【WordPress】ACF 6.2.7以降でthe_field()やthe_sub_field()がHTMLエスケープされる仕様変更への対応方法 より

functions.phpにapply_filters()を追加して、wp_kses() のエスケープのルールを変更する

前述のとおり、wp_kses() はfunctions.phpでコントロールが可能です。下記のようなかたちで、エスケープのルールを追加し、回避できるようにする、という対処法です。

//"google_maps_iframe"というフィールドの場合、エスケープをしないようにする

add_filter( 'acf/the_field/allow_unsafe_html', function( $allowed, $selector ) {
    if ( $selector === "google_maps_iframe" ) {
        return true;
    }
    return $allowed;
}, 10, 2);
apply_filters( 'acf/the_field/allow_unsafe_html', false, $selector, $post_id, $field_type, $field_object )

ACF 6.2.5 Security Release より

この場合、the_field() が出力する全ての内容に対してのルール変更をするわけではないため、意図した挙動になるまでは試行錯誤が必要かもしれません。

これらの対応がちょっと今できない!取り急ぎ表示が崩れるのは避けたい!どうしたらいい?

プラグインの自動アップデートを一時的にオフにします。その上で、落ち着いて作業ができる日に開発環境を用意してチェック→対応としましょう。
もし、もう自動アップデートがかかってしまった…!という場合はダウングレードを行いACF6.2.7以前に戻せば大丈夫です。WP Rollbackというプラグインを使うと、管理画面上で簡単にダウングレードを行えるのでおすすめです。

ただし、「アップデートをかけなければ影響を受けないんだからもうこのままバージョンを上げるのをやめちゃうぞ~!」というのはおすすめしませんので、影響を受けているようであれば早めに対応+アップデートを行いましょう。

  • URLをコピーしました!
  • URLをコピーしました!
目次