How to Fix ACF the_field Issues and Securely Use ACF

Advanced Custom Fields recently released an update to their supremely popular and well used plugin to fix serious security issues. These issues were so severe they are going ahead with the updates even though they may break some sites.

For this we applaud them. We take security seriously and recommend all ACF users make the changes and adjustments necessary to maintain the security of their website.

How to solve for the change

There are many approaches to how to fix the issue depending on the exact issue you may be facing. It’s a good idea to read the ACF 6.2.5 Security Release post for the most relevant details. The plugin devs know the most about the issues, the fixes, and why they’ve decided to make the change. In this post I’ll be detailing what we have done here at Cinch for the customers who are seeing the ACF notification:

Changes to the_field

Most of our customers are seeing the issue related to how the_field is being used in custom themes. We’re seeing a lot instances like this:

<?php the_field('featured_title'); ?>

Often the easiest change is to update it to:

<?php echo get_field('featured_title'); ?>

Which we’ve found doesn’t always clear out the ACF notification. In those cases we’ve been usign the wp_kses_post function like this:

<?php echo wp_kses_post( get_field('featured_title') ); ?>

Which doesn’t always work either. Here’s how we fixed a field that was rendering an SVG image as code, which isn’t part of the allowed HTML entities in wp_kses:

<?php the_field('logo_svg'); // old code ?>

<?php $logo = get_field('logo_svg'); ?>
<?php printf($logo); ?>

This allows us to render the SVG as an image and also clears the ACF notification. I can’t say for 100% certainty that this doesn’t leave us open to the HTML escaping issue, but in this case we’re confident in all authors on the site not entering malicious code. That said, going forward this is not how we’ll handle rendering SVG images.

Update: Actually the above option did not work for outputting an SVG. Instead we conditionally opted out with this:

add_filter('acf/the_field/allow_unsafe_html', function( $allowed, $selector ) {

  if ( $selector === 'logo_svg' ) {
    return true;
  }
  
  return $allowed;
  
}, 10, 2);

What if I do nothing?

Not changing these fields won’t necessarily result in the fields not getting rendered on the front end. In the above case, the content is a simple text field and would get sanitized just fine either way. You will likely continue to get the notification for now, and in the future get an even more serious looking notification. They will not go away permanently by just clearing.

Conditionally opt out

The ACF team has built a filter to conditionally disable the behavior for specific fields. This may be the better option for rendering an SVG for example:

add_filter( 'acf/shortcode/allow_unsafe_html', function ( $allowed, $atts ) {
    if ( $atts['field'] === 'logo_svg' ) {
        return true;
    }
    return $allowed;
}, 10, 2 );

You can also globally opt out. But don’t! Don’t do this:

// Do not do this

add_filter( 'acf/shortcode/allow_unsafe_html', function () {
    
    return true;

}, 10, 2 );

This is all still a moving target for us as we figure out what issues customers are having and how best to solve it. If you are having big unsolvable issues your best bet is to contact the ACF Support Team directly. There is a lot of info in the comments section as well, but I wouldn’t rely on any info you find there.