What is the best practice for escaping data URIs?

Question

Usually, you would use esc_url() to escape a URL before displaying it. If that 'URL' is a data URI (eg. 'data:image/svg+xml;base64,...'), it will be trimmed blank by esc_url().

The Codex page on Data Validation has this to say about escaping URLs:

Always use esc_url when sanitizing URLs (in text nodes, attribute nodes or anywhere else). Rejects URLs that do not have one of the provided whitelisted protocols (defaulting to http, https, ftp, ftps, mailto, news, irc, gopher, nntp, feed, and telnet), eliminates invalid characters, and removes dangerous characters. Replaces clean_url() which was deprecated in 3.0.

Data URIs aren't covered by this function and don't appear to be covered by any of the other standard WP escaping functions.

Is there an established best practice in WordPress for escaping data URIs?

Answer 1

It is possible to pass an array with allowed protocols to the esc_url() function. For data-URLs this has to contain the data scheme, as this is not whitelisted by wp_allowed_protocols() as default.

esc_url( $data_url, array( 'data' ) );

Answer 2

A data URI isn't quite a url, but it is an attribute. Use esc_attr to escape it in attributes, and esc_html elsewhere. The key being that escaping indicates what you're expecting. If you're expecting a url, use esc_url, if it's an attribute use esc_attr, if it's text with no html, use esc_html, etc etc

esc_url will do the same but with some additional rules, such as enforcing a protocol at the beginning etc