`safecss_filter_attr` removes background-images with URL parameters

[ryelle]

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 ​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…

<!-- 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.

[webmandesign]

This seems to be affecting Cover block with "Fixed background" enabled too.

[SirLouen]

Reproduction Report

Description

This report can't validate that issue can be reproduced.

Environment

• WordPress: 6.8-beta3-60042-src
• PHP: 8.2.28
• Server: nginx/1.27.4
• Database: mysqli (Server: 8.4.4 / Client: mysqlnd 8.2.28)
• Browser: Chrome 134.0.0.0
• OS: Windows 10/11
• Theme: Twenty Nineteen 3.0
• MU Plugins: None activated
• Plugins:
  • Hello Dolly 1.7.2
  • Test Reports 1.2.0

Actual Results

1. ❌ Error condition doesn't occur anymore (reproduced).

Additional Notes

• 3 Years has passed since the original report, maybe this has been sorted in the Gutenberg repo.

There are multiple reports regarding this topic ​like this

Supplemental Artifacts

Copy/pasted original code:

Result