Fix embeds in Chrome (#384)

.github/workflows/e2e-tests.yml

@@ -87,21 +87,6 @@ jobs:
                   token: ${{ secrets.CODECOV_TOKEN }}
               if: ${{ matrix.wp == 'trunk' }}
 
-            - name: Get coverage artifact name
-              if: always()
-              run: |
-                ARTIFACT_NAME=${ARTIFACT_NAME//\//-}
-                echo "ARTIFACT_NAME=${ARTIFACT_NAME}" >> $GITHUB_ENV
-              env:
-                ARTIFACT_NAME: coverage-${{ matrix.wp }}-${{ matrix.shard }}
-
-            - name: Archive coverage report
-              uses: actions/upload-artifact@v4
-              if: always()
-              with:
-                name: ${{ env.ARTIFACT_NAME }}
-                path: artifacts/e2e-coverage/coverage/codecov.json
-
             - name: Get debug artifact name
               if: always()
               run: |

.github/workflows/nightly-build.yml

@@ -61,7 +61,7 @@ jobs:
             - name: Update version number
               if: ${{ env.CURRENT_TAG != 'nightly' }}
               run: |
-                sed -i -e "s/Version:     0.0.2/Version:     0.0.2-$GITHUB_SHA/g" ./media-experiments.php
+                  sed -i -e "s/Version:     0.0.2/Version:     0.0.2-$GITHUB_SHA/g" ./media-experiments.php
 
             - name: Create ZIP file
               if: ${{ env.CURRENT_TAG != 'nightly' }}

inc/class-cross-origin-isolation.php

@@ -34,7 +34,7 @@ public function register(): void {
 	public function send_headers(): void {
 		if ( $this->needs_isolation() ) {
 			header( 'Cross-Origin-Opener-Policy: same-origin' );
-			header( 'Cross-Origin-Embedder-Policy: require-corp' );
+			header( 'Cross-Origin-Embedder-Policy: credentialless' );
 		}
 
 		ob_start( [ $this, 'replace_in_dom' ] );

packages/edit-post/src/crossOriginIsolation/index.ts

@@ -2,17 +2,22 @@ import { addFilter } from '@wordpress/hooks';
 
 type CrossOriginValue = 'anonymous' | 'use-credentials' | '' | undefined;
 
-// @ts-ignore -- Params are unused, but maybe we need them in the future.
-function forceCrossOrigin( imgCrossOrigin: CrossOriginValue, url: string ) {
+function forceCrossOrigin( _imgCrossOrigin: CrossOriginValue, _url: string ) {
 	return 'anonymous' as CrossOriginValue;
 }
 
-function addAttribute( el: HTMLElement ) {
-	if ( el.hasAttribute( 'crossorigin' ) ) {
-		return;
+function addAttribute( el: Element ) {
+	if ( ! el.hasAttribute( 'crossorigin' ) ) {
+		el.setAttribute( 'crossorigin', 'anonymous' );
 	}
 
-	el.setAttribute( 'crossorigin', 'anonymous' );
+	if ( el.nodeName === 'IFRAME' && ! el.hasAttribute( 'credentialless' ) ) {
+		el.setAttribute( 'credentialless', 'true' );
+
+		if ( ! el.hasAttribute( 'src' ) ) {
+			el.setAttribute( 'src', '' );
+		}
+	}
 }
 
 if ( window.crossOriginIsolated ) {
@@ -22,39 +27,73 @@ if ( window.crossOriginIsolated ) {
 		forceCrossOrigin
 	);
 
-	/**
+	/*
 	 * Complementary component to the Cross_Origin_Isolation PHP class
 	 * that detects dynamically added DOM nodes that are missing the `crossorigin` attribute.
 	 * These are typically found in custom meta boxes and the WordPress admin bar.
-	 *
-	 * @return {null} Rendered component
 	 */
-
 	const observer = new MutationObserver( ( mutations ) => {
 		mutations.forEach( ( mutation ) => {
-			[ mutation.addedNodes, mutation.target ].forEach( ( node ) => {
-				if (
-					! ( 'querySelectorAll' in node ) ||
-					! node.querySelectorAll
-				) {
-					return;
-				}
+			[ mutation.addedNodes, mutation.target ].forEach( ( value ) => {
+				const nodes = value instanceof NodeList ? value : [ value ];
+				nodes.forEach( ( node ) => {
+					const el: HTMLElement = node as HTMLElement;
+
+					if ( ! el.querySelectorAll ) {
+						// Most likely a text node.
+						return;
+					}
 
-				( node as HTMLElement )
-					.querySelectorAll( 'img,source,script,video,link' )
-					.forEach( ( el ) => {
-						addAttribute( el as HTMLElement );
+					el.querySelectorAll(
+						'img,source,script,video,link,iframe'
+					).forEach( ( v ) => {
+						addAttribute( v );
 					} );
 
-				if (
-					node instanceof HTMLImageElement ||
-					node instanceof HTMLSourceElement ||
-					node instanceof HTMLScriptElement ||
-					node instanceof HTMLVideoElement ||
-					node instanceof HTMLLinkElement
-				) {
-					addAttribute( node );
-				}
+					if ( el.nodeName === 'IFRAME' ) {
+						const iframeNode: HTMLIFrameElement =
+							el as HTMLIFrameElement;
+
+						/*
+						 * If for example embedding a tweet, it should be loaded
+						 * in a credentialless iframe, but the tweet itself
+						 * should not be modified.
+						 */
+
+						const isEmbedSandboxIframe =
+							iframeNode.classList.contains(
+								'components-sandbox'
+							);
+
+						if ( ! isEmbedSandboxIframe ) {
+							iframeNode.addEventListener( 'load', () => {
+								if ( iframeNode.contentDocument ) {
+									observer.observe(
+										iframeNode.contentDocument,
+										{
+											childList: true,
+											attributes: true,
+											subtree: true,
+										}
+									);
+								}
+							} );
+						}
+					}
+
+					if (
+						[
+							'IMG',
+							'SOURCE',
+							'SCRIPT',
+							'VIDEO',
+							'LINK',
+							'IFRAME',
+						].includes( el.nodeName )
+					) {
+						addAttribute( el );
+					}
+				} );
 			} );
 		} );
 	} );