[wp-trac] [WordPress Trac] #55452: `safecss_filter_attr` removes background-images with URL parameters

[WordPress Trac]

#55452: `safecss_filter_attr` removes background-images with URL parameters
--------------------------+-----------------------------
 Reporter:  ryelle        |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Formatting    |    Version:
 Severity:  normal        |   Keywords:
  Focuses:  css           |
--------------------------+-----------------------------
 If you try to add a background-image using an inline style, and the URL
 has query parameters (specifically, an `&`), the background-image will be
 stripped from the content.

 What seems to be happening: the `&` is encoded, and becomes `&`, and
 when `safecss_filter_attr` splits the `$css` into separate declarations,
 it does so just by [https://github.com/WordPress/wordpress-
 develop/blob/ee96cedcb891c6a6e5b7b30a6f1c247345161b88/src/wp-
 includes/kses.php#L2242 breaking on a semicolon], which breaks the URL
 value. For example, `background-
 image:url(https://fake.test/image.png?a=1&b=2);` becomes `background-
 image:url(https://fake.test/image.png?a=1&amp` and `b=2)`, and neither are
 valid CSS.

 **To reproduce:**

 Try adding this Media & Text block, which uses this image:
 [https://img.rawpixel.com/s3fs-
 private/rawpixel_images/website_content/a005-scottw-465.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=06d4e5a9962096a6010029591ae36198
 https://img.rawpixel.com/s3fs-
 private/rawpixel_images/website_content/a005-scottw-465.jpg?w=1200&h=1200…]

 {{{
 <!-- wp:media-text
 {"mediaId":null,"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.75","y":"0.72"}}
 -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-
 fill"><figure class="wp-block-media-text__media" style="background-
 image:url(https://img.rawpixel.com/s3fs-
 private/rawpixel_images/website_content/a005-scottw-465.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=06d4e5a9962096a6010029591ae36198
 );background-position:75% 72%"><img src="https://img.rawpixel.com/s3fs-
 private/rawpixel_images/website_content/a005-scottw-465.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=06d4e5a9962096a6010029591ae36198"
 alt="" /></figure><div class="wp-block-media-text__content"><!--
 wp:paragraph {"placeholder":"Content…","fontSize":"medium"} -->
 <p class="has-medium-font-size">"<a rel="noreferrer noopener"
 href="https://www.rawpixel.com/image/430579/free-photo-image-palm-tree-
 palm-africa" target="_blank">Palm trees at Cape Town, South Africa</a>" by
 Scott Webb is marked with <a rel="noreferrer noopener"
 href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse"
 target="_blank">CC0 1.0</a>.</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
 }}}

 When you save and view the post, the background-image is gone.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55452>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform