Advanced Custom Fields Escape HTML Put Simply

ACF will report that there is an important change you need to be aware of before you update their plugin. They would like you to prepare for a change to the output of ‘the_field()’ coming in February. They are changing the way they escape HTML with a view to improving security.

What this means is that if you are using the_field('your_custom_field') in your templates you might need to take action if they contain HTML tags but only certain types of HTML tags. The chances are that if the field is a WYSIWYG there will be plenty of tags from ‘H2’ to ‘&’ and these are all absolutely fine. A list of the allowed tags is here »

In order to try and identify potential issues ACF are adding messages to the top of ‘affected’ sites. In my case:

ACF — ACF will soon escape unsafe HTML that is rendered by the_field(). We’ve detected the output of some of your fields will be modified by this change. Learn how to fix. Hide details

  • blurb_title (blurb_title) – rendered via the_field
  • client_introduction (client_introduction) – rendered via the_field

When is it not an issue? The fields just contain ‘&’ or something similar and that is absolutely fine. If you look at the allowed HTML tags there are plenty that will be fine.

When is it an issue? When you have embedded script (like an iFrame) or other script tags in a WYSIWYG box. Some shortcodes can also cause issues. So if you check your advanced custom fields content and find <script> or <iframe> tags that is when will be an issue.

You can just fix it by changing the way the code is embedded; or if you totally trust all of the users that are updating your site you can add the following to your theme functions file. This will stop ACF escaping the HTML altogether and basically keep things as they are now.

Remember to replace “your_custom_field” with the name of your actual field.

add_filter( ‘acf/the_field/allow_unsafe_html’, function( $allowed, $selector ) {
if ( $selector === “your_custom_field” ) return true;
return $allowed;
}, 10, 2);

I hope this helps!

Complete web design service for a beautiful, perfectly structured website. Fully engage your visitors with a website that is Google ready, mobile friendly, easy to navigate and painless to manage.

GET IN TOUCH TODAY!