0

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:

enter image description here

Image element code:

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

Result:

enter image description here
enter image description here

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

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?

2
  • Is this a WordPress Multisite installation? In Multisite, the unfiltered_html capability is only available to Super Admins. If it's not Multisite, then the Administrator and Editor roles have unfiltered_html by default. If you should have unfiltered_html but don't, then check with ACF support.
    – Pat J
    Commented Aug 10, 2022 at 17:56
  • Yes it's Multisite. Let me check the capability.
    – Shahriar
    Commented Aug 10, 2022 at 19:18

1 Answer 1

0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.