Media: Remove IMG from crossorigin attribute injection#11291
Media: Remove IMG from crossorigin attribute injection#11291adamsilverstein wants to merge 5 commits intoWordPress:trunkfrom
Conversation
Under Document-Isolation-Policy: isolate-and-credentialless, the browser handles cross-origin images in credentialless mode without needing explicit CORS headers. Adding crossorigin="anonymous" to img elements overrides this and breaks external images whose servers don't serve CORS headers (e.g. sidebar previews for external image URLs). Also removes imagesrcset handling from LINK elements for the same reason. See #64766.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
Add tests for audio, video, link, source elements, srcset on images, imagesrcset on links, same-origin and relative URLs, existing crossorigin preservation, and mixed tags.
Reduces boilerplate by consolidating 10 individual test methods into two data-provider-driven tests while keeping the same coverage.
|
Added a proposed commit message to the PR description. |
The hardcoded http://example.org URL does not match CI configs that use a non-standard port (example.org:8889), causing the test to fail. Use site_url() at runtime.
|
Why are images the one exception that don't need |
| * @param string $html HTML input to process. | ||
| */ | ||
| public function test_output_buffer_adds_crossorigin_attributes() { | ||
| public function test_output_buffer_adds_crossorigin( $html ) { |
There was a problem hiding this comment.
| public function test_output_buffer_adds_crossorigin( $html ) { | |
| public function test_output_buffer_adds_crossorigin( string $html ) { |
| * @return array[] | ||
| */ | ||
| public function data_elements_that_should_get_crossorigin() { |
There was a problem hiding this comment.
| * @return array[] | |
| */ | |
| public function data_elements_that_should_get_crossorigin() { | |
| * @return array<string, array{ 0: string }> | |
| */ | |
| public function data_elements_that_should_get_crossorigin(): array { |
| * | ||
| * @param string $html HTML input to process. | ||
| */ | ||
| public function test_output_buffer_does_not_add_crossorigin( $html ) { |
There was a problem hiding this comment.
| public function test_output_buffer_does_not_add_crossorigin( $html ) { | |
| public function test_output_buffer_does_not_add_crossorigin( string $html ) { |
andrewserong
left a comment
There was a problem hiding this comment.
Thanks for handling the change here! The code change looks good, and I think we'll only be able to confirm in the block editor once WordPress/gutenberg#76618 is included in the next Gutenberg sha bump.
LGTM 🚀
Trac ticket: https://core.trac.wordpress.org/ticket/64886
Related Gutenberg issue: WordPress/gutenberg#76476
Description
Removes
IMGfrom the list of elements that receivecrossorigin="anonymous"inwp_add_crossorigin_attributes(). Also removes the relatedimagesrcsethandling fromLINKelements.Under
Document-Isolation-Policy: isolate-and-credentialless(introduced in r61844), the browser's credentialless mode already handles cross-origin image loading without requiring CORS headers on the remote server. Explicitly addingcrossorigin="anonymous"to<img>elements overrides this behavior and forces a CORS preflight — breaking images from servers that don't includeAccess-Control-Allow-Originin their response headers.This causes image previews to break in the block editor sidebar when an image block references an external URL (e.g.
https://placehold.jp/1024x768.jpg).Related Gutenberg PR: WordPress/gutenberg#76618
Changes
IMGentry from$cross_origin_tag_attributesinwp_add_crossorigin_attributes()imagesrcsetfromLINKentry (used for<link>preload tags for images — same issue)<script>instead of<img>for the positive case<img>does NOT getcrossorigin="anonymous"Testing
https://placehold.jp/1024x768.jpgDocument-Isolation-Policy: isolate-and-credentiallessheader is still sentCommit message