Escaping output with only specific allowed HTML elements
Sometimes when developing for WordPress, you will want to echo something. As all good developers know, any such content must be escaped. This makes sure that nothing nasty can be echoed and keeps you code more secure.
WordPress comes with a number of escaping functions, however sometimes they don't quite do as you want. Take this example.
<figure class="wp-block-embed alignwide is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"> <div class="wp-block-embed__wrapper"> <iframe loading="lazy" width="500" height="281" src="https://www.youtube-nocookie.com/embed/yCtadbz_pgE?feature=oembed&rel=0&showinfo=0&autoplay=1" frameborder="0" allowfullscreen="" allow="autoplay"></iframe> </div> </figure>
You may notice this is the output from a core embed block. It always contains the same markup. A
<figure> with a
<div> inside and inside that, the
<iframe>. Therefore we need a way to escape this but make sure that these elements are not escaped.
Initially you might think that using
wp_kses_post() would work. This is for escaping the output of post content. However this doesn't work as it removes iFrames. So how do we get around this problem?
The answer is to use
wp_kses() but pass it an array of the elements we want to allow.
We create a function (
hd_allowed_embed_html()) which returns an array of the elements and the element attributes that are allowed. We then wrap the echoed content with
wp_kses() and pass our function (
hd_allowed_embed_html()) as the second argument.
Now anything that is not an
<figure> with specific attributes will be escaped for us.