HTML Img with data:image src gets sanitized in admin?

Question

In the WordPress admin panel (dashboard), I want to add an image inside an ACF field description. Since it's a simple SVG icon, I want to load it using <img src="data:image/svg+xml..." /> to avoid loading the whole icon font. However, it looks like the HTML is being sanitized or for whatever reason, the icon doesn't load correctly.

ACF Field:

Image element code:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLWNhbGVuZGFyLWV2ZW50IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSI+PC9wYXRoPjxyZWN0IHg9IjQiIHk9IjUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIzIiB4Mj0iMTYiIHkyPSI3Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIzIiB4Mj0iOCIgeTI9IjciPjwvbGluZT48bGluZSB4MT0iNCIgeTE9IjExIiB4Mj0iMjAiIHkyPSIxMSI+PC9saW5lPjxyZWN0IHg9IjgiIHk9IjE1IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIj48L3JlY3Q+PC9zdmc+" />

Result:

As you can see, the data is removed from the img src. If I manually add it again, then the icon appears:

I don't know if WordPress is doing some kind of sanitization in the background, or it's done by another plugin, or maybe the ACF itself. How do you think I can solve this?

Answer 1

With sanitization usually the wp_allowed_protocols function is used, which often creates the issue you are experiencing (for example it happens in Jetpack too), that 'data:' is being filtered out from the src of images.

The solution is to add 'data' to the allowed protocols, either from a plugin's PHP code, or from the functions.php file of the theme:

add_filter( 'kses_allowed_protocols', 'add_to_kses_allowed_protocols', 10, 1 );
           
function add_to_kses_allowed_protocols( $protocols ) {
  $protocols[] = 'data';
  return $protocols;
}