How to escape multiple attribute at once in WordPress?

Question

I'm developing a WordPress theme and trying to escaping group of attribute at once that store with a variable.

<?php 
$attributes = array();
$classes = array(
    'header-section'
);
if ( true == $noticebar ) {
    $classes[] = 'topnotice-exist';
}
if ( true == $option['switch-top-bar'] ) {
    $classes[] = 'topbar-exist';
}
if ( true == $option['switch-menu-sticky'] ) {
    if ( '2' == $option['fixed-menu-style'] ) {
        $classes[] = 'fixed-after-pixel';
    } elseif ('3' == $option['fixed-menu-style']) {
        $classes[] = 'only-after-scroll-up';
    } else {
        $classes[] = 'only-after-scroll';
    }
}

$classes = implode( ' ', $classes );

if ( $classes ) {
  $attributes[] = 'class="' . trim( $classes ) . '"';
}

if ( $option['transition'] ) {
    $attributes[] = 'data-transition="' . esc_attr( $option['transition'] ) . '"';
}
$attributes[] = 'id="header"';
$attributes = implode( ' ', $attributes );
?>

<div <?php echo $attributes; ?>> <!-- here is my question -->
    <!-- html/php -->
</div>

So my question is how may I escape $attribute here, I can't use esc_attr() nor esc_html() . currently I'm using wp_kses_post() for escaping this $attribute variable but I'm not sure that is it good idea or not.

I have good idea about sprintf() and printf() so don't bring them here, I just need know, How can I echo $attribute with proper way according to WordPress escaping roles?

Answer 1

The reason you escape attributes is to make sure that the values don't have any characters that will break the HTML of the element. For example, if you didn't escape:

$attr = 'foo"> <script>alert("Bad!");</script>'; 

Then this:

<div class="<?php echo $attr; ?>"></div>

Would output:

<div class="foo"> <script>alert("Bad!");</script>"</div>

Which would let the script run.

So wp_kses_post() is completely wrong for this, because it's not going to prevent that because it doesn't escape characters for attributes. This is what esc_attr() is for, but you can't use that with your current code because your array includes the attribute name and ="". Meaning it's too late to escape $attribute because you can't escape the values without breaking the attributes.

But here's the thing: All but one of your attributes is coded by you! There's no point escaping any of your classes because they're not coming from potentially unsafe user input. The only value that needs to be escaped is $option['transition'], because it's coming from a saved option. But you're already doing that.

But to answer the question in your title, in case someone comes searching, the way to bulk escape attributes would be to put the values into an array and use array_map() to run esc_attr() on all of them.

See this example, imagining $attribute was initially populated with unsafe inputs:

$attribute = array(
        'attr1',
        'attr2',
        'attr3',
        'attr4',
        'attr5',
);

$attribute = array_map( 'esc_attr', $attribute );