Disable ACF HTML escaping

min read / ACF, Custom Code, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: Learn, how to disable the new ACF security feature, which enable the kses HTML escaping of potentially unsafe HTML in ACF fields.

IMPORTANT: Disabling security features can create a protentional risk. Do it only if you know, what you do. I am not responsible for your sites.

Completely disable the HTML escaping in ACF

This works for me within Oxygen builder. Simply put this code in functions.php of your template or into code snippets manager plugin.

add_filter( 'acf/the_field/allow_unsafe_html', function() { return true; }, 10, 2); // enough to use with Oxygen
add_filter( 'acf/shortcode/allow_unsafe_html', function() { return true; }, 10, 2);

You can find more about ACF HTML Escaping 6.2.5 release here.

Enable SVG in WordPress kses filter

You can also enable the HTML element in kses by your specific needs without disabling the filter in ACF. Here is an example of enabling the SVG and it’s attributes as safe tag in kses.

<?php 

add_filter( 'wp_kses_allowed_html', 'acf_add_allowed_svg_tag', 10, 2 );
function acf_add_allowed_svg_tag( $tags, $context ) {
    if ( $context === 'acf' ) {
        $svg_attributes = array(
            'xmlns'       => true,
            'width'       => true,
            'height'      => true,
            'viewBox'     => true, 
            'fill'        => true,
            'stroke'      => true,
            'role'        => true,
            'aria-hidden' => true,
            'focusable'   => true,
            'class'       => true,
            'style'       => true,
            'id'          => true,
            'xml:space'   => true,
        );

        $path_attributes = array(
            'd'             => true,
            'fill'          => true,
            'fill-rule'     => true,
            'stroke'        => true,
            'stroke-width'  => true,
            'stroke-linecap'=> true,
            'stroke-linejoin'=> true,
            'class'         => true,
            'style'         => true,
        );

        // Add attributes for 'svg'
        $tags['svg'] = $svg_attributes;

        // Add attributes for 'path'
        $tags['path'] = $path_attributes;

        // Add more SVG tags and their attributes
        $tags['circle'] = array(
            'cx'    => true,
            'cy'    => true,
            'r'     => true,
            'fill'  => true,
            'class' => true, 
            'style' => true, 
        );
        $tags['rect'] = array(
            'width'     => true,
            'height'    => true,
            'x'         => true,
            'y'         => true,
            'rx'        => true,
            'ry'        => true,
            'fill'      => true,
            'class'     => true, 
            'style'     => true, 
        );
        // Add more SVG tags and attributes by the needs
        $tags['line'] = array( 
            'x1'    => true,
            'y1'    => true,
            'x2'    => true,
            'y2'    => true,
            'stroke'=> true,
            'stroke-width' => true,
            'class' => true, 
            'style' => true, 
        );
        $tags['polyline'] = array( 
            'points' => true,
            'stroke' => true,
            'stroke-width' => true,
            'fill'   => true,
            'class'  => true, 
            'style'  => true, 
        );
        $tags['polygon'] = array( 
            'points' => true,
            'stroke' => true,
            'stroke-width' => true,
            'fill'   => true,
            'class'  => true, 
            'style'  => true, 
        );
        // Add more tags and attributes here by your needs

    }

    return $tags;
}

0 comments