From 3086-gh-jpop-issues, we've found out these things:

The issue is reproducible as follows:

Keep lazy-load module off
Take a normal jpeg image from the internet and save it to your desktop
Visit https://www.base64-image.de/ and convert it to base64.
Copy the code.
Wrap it in img tag as follows: https://cld.wthms.co/M3dUiw+
Create a new post with it and publish it. It works - http://cld.wthms.co/96dSMg
Enable the lazy-load module, it breaks - http://cld.wthms.co/uklnzB

Debugging

Troubleshooting further, it seems that whenever Lazy Images is loaded, it strips out the data: part of the src attribute. If I manually add data:, the base64 image displays well.

This happens because of the wp_kses_hair fuction with the wp_allowed_protocols() parameter here

https://github.com/Automattic/jetpack/blob/6.8/modules/lazy-images/lazy-images.php/#L166

By default, wp_allowed_protocols() does not have the data protocol that explains why we strip out.

Workaround

To "fix" this issue, we need to add the data protocol to wp_allowed_protocols() by using this snippet:

/*
 * Add 'data' for based64 enconcoded images for wp_allowed_protocols()
 * With this, Jetpack Lazy Images will not strip out "data" in the "src" attribute https://github.com/Automattic/jetpack/blob/6.8/modules/lazy-images/lazy-images.php/#L166
 */

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

Fix

A simple fix is to change the line above to:

		$lazy_images_protocols = array_unique( array_push( wp_allowed_protocols(), 'data') );
		$old_attributes_kses_hair = wp_kses_hair( $old_attributes_str, $lazy_images_protocols );

We may consider adding a filter here also.

I am not sure if there is any issue in this approach, or anything we need to consider. Otherwise, I am happy to create a PR for this :)

Lazy Load not rendering base64 image #10607

Description

ffPjrZUGXfcxuAjopenedon Nov 13, 2018

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

ffPjrZUGXfcxuAj
openedon Nov 13, 2018