Cross Origin Isolation: Remove img from the list of elements that get mutated (#76618)

andrewserong · adamsilverstein · t-hamano · gutenbergplugin · commit 1a6b76d103d6 · 2026-03-18T23:24:26.000Z
* Try to fix image previews for images without CORS in 7.0 * Add backport changelog for core PR #11291 --------- Co-authored-by: adamsilverstein <adamsilverstein@earthboundhosting.com> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: inc2734 <inc2734@git.wordpress.org>
diff --git a/backport-changelog/7.0/11291.md b/backport-changelog/7.0/11291.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11291
+
+* https://github.com/WordPress/gutenberg/pull/76618
diff --git a/lib/media/load.php b/lib/media/load.php
@@ -345,7 +345,6 @@ function gutenberg_add_crossorigin_attributes( string $html ): string {
 	// See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin.
 	$tags = array(
 		'AUDIO'  => 'src',
-		'IMG'    => 'src',
 		'LINK'   => 'href',
 		'SCRIPT' => 'src',
 		'VIDEO'  => 'src',
diff --git a/packages/block-editor/src/hooks/cross-origin-isolation.js b/packages/block-editor/src/hooks/cross-origin-isolation.js
@@ -27,14 +27,14 @@ if ( window.crossOriginIsolated ) {
 						return;
 					}
 
-					el.querySelectorAll(
-						'img,source,script,video,link'
-					).forEach( ( v ) => {
-						addCrossOriginAttribute( v );
-					} );
+					el.querySelectorAll( 'source,script,video,link' ).forEach(
+						( v ) => {
+							addCrossOriginAttribute( v );
+						}
+					);
 
 					if (
-						[ 'IMG', 'SOURCE', 'SCRIPT', 'VIDEO', 'LINK' ].includes(
+						[ 'SOURCE', 'SCRIPT', 'VIDEO', 'LINK' ].includes(
 							el.nodeName
 						)
 					) {
diff --git a/packages/block-editor/src/hooks/test/cross-origin-isolation.js b/packages/block-editor/src/hooks/test/cross-origin-isolation.js
@@ -152,7 +152,7 @@ describe( 'cross-origin-isolation', () => {
 		expect( observeSpy ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should add crossorigin="anonymous" to images', async () => {
+	it( 'should not add crossorigin="anonymous" to images', async () => {
 		Object.defineProperty( window, 'crossOriginIsolated', {
 			value: true,
 			writable: true,
@@ -172,8 +172,12 @@ describe( 'cross-origin-isolation', () => {
 		// Wait for MutationObserver callback to fire (async microtask).
 		await new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
 
-		// The image should get the crossorigin attribute
-		expect( img ).toHaveAttribute( 'crossorigin', 'anonymous' );
+		// Images should NOT get the crossorigin attribute.
+		// Under Document-Isolation-Policy: isolate-and-credentialless,
+		// the credentialless mode handles image loading without CORS headers.
+		// Adding crossorigin="anonymous" would override this and break
+		// external images that don't serve CORS headers.
+		expect( img ).not.toHaveAttribute( 'crossorigin' );
 
 		document.body.removeChild( img );
 	} );
diff --git a/phpunit/media/media-processing-test.php b/phpunit/media/media-processing-test.php
@@ -163,8 +163,8 @@ public function test_add_crossorigin_attributes() {
 HTML;
 
 		$expected = <<<HTML
-<img crossorigin="anonymous" src="https://www.someothersite.com/test1.jpg" />
-<img crossorigin="anonymous" src="test2.jpg" />
+<img src="https://www.someothersite.com/test1.jpg" />
+<img src="test2.jpg" />
 <audio crossorigin="anonymous"><source src="https://www.someothersite.com/test1.mp3"></audio>
 <audio crossorigin="anonymous" src="https://www.someothersite.com/test1.mp3"></audio>
 <audio src="/test2.mp3"></audio>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+https://github.com/WordPress/wordpress-develop/pull/11291`
	`2`	`+`
	`3`	`+* https://github.com/WordPress/gutenberg/pull/76618`