How to fix: ACF will soon escape unsafe HTML that is rendered by the_field()

If your site uses ACF pro then you’ve probably been seeing the warning in your WP dashboard that says “ACF will soon escape unsafe HTML that is rendered by the_field(). Click on learn more, you can see the article here which shows how to fix it. Some of this article has exact references to the original article from Advanced Custom Fields.

Here’s the warning in my client’s dashboard for example:

Since this release can cause breaking changes, and this site is an enterprise site, we agreed to fix it. The article gives you a number of options such as:

How to use ACF securely

This is the best option, so I found all the template files where the_field is being called directly and changed them:

<?php the_field(‘general_text_container’); ?> (the_field is being called directly)

Changed to:

<?php echo wp_kses_post( get_field(‘general_text_container’) );?> (field is now escaping unsafe HTML)

Remove the warning

I can’t recommend, as all it does is remove the warning, and not actually fix the problem. Remember when Homer Simpson covered the ‘check engine’ warning on his car with duct tape 🙂 Let’s not do that.

But if you do choose to go with this one, you can add this to your functions.php file:

add_filter( 'acf/admin/prevent_escaped_html_notice', '__return_true' );

Conditionally disable the new rules

I can’t recommend this option either, but here’s how you can conditionally allow unsafe HTML.

If you trust your users with the role of contributor or higher, it is possible to use one of two new filters to disable this automatic escaping by returning true. You should limit the filter to specific field keys using the additional parameters available.

• acf/shortcode/allow_unsafe_html will disable the escaping for the shortcode.
• acf/the_field/allow_unsafe_html will disable the escaping when using the_field.

The filters provide different arguments should you wish to allow unsafe HTML for a specific field type, on a specific page, or for a specific field name or key.

The shortcode filter provides you the field type and the full attributes array passed into the shortcode, along with the full field object if available:

apply_filters( 'acf/shortcode/allow_unsafe_html', false, $attributes, $field_type, $field_object )

For example, if you’re using [acf field="podcast_iframe"] to output an iframe, you could use the following code to allow that field to output potentially unsafe HTML (the iframe)

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

The filter for the_field() (and the_sub_field()) provides you with the field selector provided to the output function, the post ID (if provided), and the field type. It also provides you the field object which will contain the field key (but may be false if ACF wasn’t able to find the field reference).

apply_filters( 'acf/the_field/allow_unsafe_html', false, $selector, $post_id, $field_type, $field_object )

For example, If you’ve got a field called google_maps_iframe which contains an iframe of a google map, the follow code would allow it to still be output by the_field:

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

Enable the new behaviour early

I also went for this, so all stripping of unsafe HTML is immediately implemented and an error report is given if it happens again. You can add this to your functions.php file.add_filter( 'acf/the_field/escape_html_optin', '__return_true' );

Jane James is the founder of Alpha Omega Digital, and is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.