Remove Cross-Origin-*-Policy headers (#695)

These headers were introduced to enable embedding Playground on sites where CORP headers are set. However, choosing a header value like require-corp or credentialless has consequences for both sites trying to embed Playground, and the sites Playground wants to embed. In particular, it broke YouTube embeds (#411). Let's rollback these headers for now. Embedding Playground should still be possible on sites with CORP headers by using a credentialless iframe: [Chrome developer blog](https://developer.chrome.com/blog/iframe-credentialless/) says: > We're introducing <iframe credentialless> to help embed third-party iframes that don't set COEP Credentialless iframes generate ephemeral contexts for cookies and storage that are destroyed once the user navigates away from the top-level page. For the most part, it doesn't matter in Playground. In the future we might see a use-case for preserving the state of Playground embedded in a credentialless iframe. Let's revisit these headers if and when that happens,. Solves #411 Related to #586
WordPress · Oct 13, 2023 · e5db16e · e5db16e
1 parent e140ec7
commit e5db16e
Show file tree

Hide file tree

Showing 5 changed files with 0 additions and 33 deletions.
diff --git a/packages/docs/site/docs/11-architecture/18-host-your-own-playground.md b/packages/docs/site/docs/11-architecture/18-host-your-own-playground.md
@@ -109,8 +109,6 @@ The combined Apache `.htaccess` file looks like this.
 AddType application/wasm .wasm
 AddType	application/octet-stream .data
 
-Header set Cross-Origin-Resource-Policy: cross-origin
-Header set Cross-Origin-Embedder-Policy: credentialless
 RewriteEngine on
 RewriteRule ^plugin-proxy$ plugin-proxy.php [NC]
 ```
@@ -139,9 +137,6 @@ location /plugin-proxy {
 location /scope:.* {
   rewrite ^scope:.*?/(.*)$ $1 last;
 }
-
-add_header "Cross-Origin-Resource-Policy" "cross-origin";
-add_header "Cross-Origin-Embedder-Policy" "credentialless";
 ```
 
 You may need to adjust the above according to server specifics, particularly how to invoke PHP for the path `/plugin-proxy`.

diff --git a/packages/playground/interactive-block-playground/vite.config.ts b/packages/playground/interactive-block-playground/vite.config.ts
@@ -47,20 +47,12 @@ export default defineConfig(({ command }) => {
 		preview: {
 			port: websiteDevServerPort,
 			host: websiteDevServerHost,
-			headers: {
-				'Cross-Origin-Resource-Policy': 'cross-origin',
-				'Cross-Origin-Embedder-Policy': 'credentialless',
-			},
 			proxy,
 		},
 
 		server: {
 			port: websiteDevServerPort,
 			host: websiteDevServerHost,
-			headers: {
-				'Cross-Origin-Resource-Policy': 'cross-origin',
-				'Cross-Origin-Embedder-Policy': 'credentialless',
-			},
 			proxy,
 		},
 

diff --git a/packages/playground/remote/service-worker.ts b/packages/playground/remote/service-worker.ts
@@ -50,14 +50,6 @@ initializeServiceWorker({
 				)
 			) {
 				const response = await convertFetchEventToPHPRequest(event);
-				response.headers.set(
-					'Cross-Origin-Resource-Policy',
-					'cross-origin'
-				);
-				response.headers.set(
-					'Cross-Origin-Embedder-Policy',
-					'credentialless'
-				);
 				return response;
 			}
 			const request = await rewriteRequest(

diff --git a/packages/playground/remote/vite.config.ts b/packages/playground/remote/vite.config.ts
@@ -36,10 +36,6 @@ export default defineConfig({
 	server: {
 		port: remoteDevServerPort,
 		host: remoteDevServerHost,
-		headers: {
-			'Cross-Origin-Resource-Policy': 'cross-origin',
-			'Cross-Origin-Embedder-Policy': 'credentialless',
-		},
 		fs: {
 			// Allow serving files from one level up to the project root
 			allow: ['./'],

diff --git a/packages/playground/website/vite.config.ts b/packages/playground/website/vite.config.ts
@@ -63,20 +63,12 @@ export default defineConfig(({ command, mode }) => {
 		preview: {
 			port: websiteDevServerPort,
 			host: websiteDevServerHost,
-			headers: {
-				'Cross-Origin-Resource-Policy': 'cross-origin',
-				'Cross-Origin-Embedder-Policy': 'credentialless',
-			},
 			proxy,
 		},
 
 		server: {
 			port: websiteDevServerPort,
 			host: websiteDevServerHost,
-			headers: {
-				'Cross-Origin-Resource-Policy': 'cross-origin',
-				'Cross-Origin-Embedder-Policy': 'credentialless',
-			},
 			proxy: {
 				...proxy,
 				// Proxy requests to the remote content through this server for dev builds.