Opened 3 years ago
Closed 8 weeks ago
#55452 closed defect (bug) (invalid)
`safecss_filter_attr` removes background-images with URL parameters
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Formatting | Keywords: | close |
Focuses: | css | Cc: |
Description
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&
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.
Change History (3)
#1
@
3 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to Future Release
#3
@
8 weeks ago
- Keywords close added; needs-patch removed
- Resolution set to invalid
- Status changed from new to closed
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
- ❌ 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
This seems to be affecting Cover block with "Fixed background" enabled too.