Add option to ensure cross-origin isolation headers on web export

2 files changed, 140 insertions, 57 deletions

diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index 54571e27c7..8ae25362f8 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -218,8 +218,29 @@ const engine = new Engine(GODOT_CONFIG);
 		threads: GODOT_THREADS_ENABLED,
 	});
 	if (missing.length !== 0) {
-		const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
-		displayFailureNotice(missingMsg + missing.join('\n'));
+		if (GODOT_CONFIG['serviceWorker'] && GODOT_CONFIG['ensureCrossOriginIsolationHeaders'] && 'serviceWorker' in navigator) {
+			// There's a chance that installing the service worker would fix the issue
+			Promise.race([
+				navigator.serviceWorker.getRegistration().then((registration) => {
+					if (registration != null) {
+						return Promise.reject(new Error('Service worker already exists.'));
+					}
+					return registration;
+				}).then(() => engine.installServiceWorker()),
+				// For some reason, `getRegistration()` can stall
+				new Promise((resolve) => {
+					setTimeout(() => resolve(), 2000);
+				}),
+			]).catch((err) => {
+				console.error('Error while registering service worker:', err);
+			}).then(() => {
+				window.location.reload();
+			});
+		} else {
+			// Display the message as usual
+			const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
+			displayFailureNotice(missingMsg + missing.join('\n'));
+		}
 	} else {
 		setStatusMode('indeterminate');
 		engine.startGame({
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
index 70e7a399e1..a5da7482f4 100644
--- a/misc/dist/html/service-worker.js
+++ b/misc/dist/html/service-worker.js
@@ -3,101 +3,163 @@
 // that they need an Internet connection to run the project if desired.
 // Incrementing CACHE_VERSION will kick off the install event and force
 // previously cached resources to be updated from the network.
-const CACHE_VERSION = "___GODOT_VERSION___";
-const CACHE_PREFIX = "___GODOT_NAME___-sw-cache-";
+/** @type {string} */
+const CACHE_VERSION = '___GODOT_VERSION___';
+/** @type {string} */
+const CACHE_PREFIX = '___GODOT_NAME___-sw-cache-';
 const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
-const OFFLINE_URL = "___GODOT_OFFLINE_PAGE___";
+/** @type {string} */
+const OFFLINE_URL = '___GODOT_OFFLINE_PAGE___';
+/** @type {boolean} */
+const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = ___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___;
 // Files that will be cached on load.
+/** @type {string[]} */
 const CACHED_FILES = ___GODOT_CACHE___;
 // Files that we might not want the user to preload, and will only be cached on first load.
+/** @type {string[]} */
 const CACHABLE_FILES = ___GODOT_OPT_CACHE___;
 const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
 
-self.addEventListener("install", (event) => {
-	event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(CACHED_FILES)));
+self.addEventListener('install', (event) => {
+	event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_FILES)));
 });
 
-self.addEventListener("activate", (event) => {
+self.addEventListener('activate', (event) => {
 	event.waitUntil(caches.keys().then(
 		function (keys) {
 			// Remove old caches.
-			return Promise.all(keys.filter(key => key.startsWith(CACHE_PREFIX) && key != CACHE_NAME).map(key => caches.delete(key)));
-		}).then(function () {
-			// Enable navigation preload if available.
-			return ("navigationPreload" in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve();
-		})
-	);
+			return Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));
+		}
+	).then(function () {
+		// Enable navigation preload if available.
+		return ('navigationPreload' in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve();
+	}));
 });
 
-async function fetchAndCache(event, cache, isCachable) {
+/**
+ * Ensures that the response has the correct COEP/COOP headers
+ * @param {Response} response
+ * @returns {Response}
+ */
+function ensureCrossOriginIsolationHeaders(response) {
+	if (response.headers.get('Cross-Origin-Embedder-Policy') === 'require-corp'
+		&& response.headers.get('Cross-Origin-Opener-Policy') === 'same-origin') {
+		return response;
+	}
+
+	const crossOriginIsolatedHeaders = new Headers(response.headers);
+	crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
+	crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
+	const newResponse = new Response(response.body, {
+		status: response.status,
+		statusText: response.statusText,
+		headers: crossOriginIsolatedHeaders,
+	});
+
+	return newResponse;
+}
+
+/**
+ * Calls fetch and cache the result if it is cacheable
+ * @param {FetchEvent} event
+ * @param {Cache} cache
+ * @param {boolean} isCacheable
+ * @returns {Response}
+ */
+async function fetchAndCache(event, cache, isCacheable) {
 	// Use the preloaded response, if it's there
+	/** @type { Response } */
 	let response = await event.preloadResponse;
-	if (!response) {
+	if (response == null) {
 		// Or, go over network.
 		response = await self.fetch(event.request);
 	}
-	if (isCachable) {
+
+	if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+		response = ensureCrossOriginIsolationHeaders(response);
+	}
+
+	if (isCacheable) {
 		// And update the cache
 		cache.put(event.request, response.clone());
 	}
+
 	return response;
 }
 
-self.addEventListener("fetch", (event) => {
-	const isNavigate = event.request.mode === "navigate";
-	const url = event.request.url || "";
-	const referrer = event.request.referrer || "";
-	const base = referrer.slice(0, referrer.lastIndexOf("/") + 1);
-	const local = url.startsWith(base) ? url.replace(base, "") : "";
-	const isCachable = FULL_CACHE.some(v => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
-	if (isNavigate || isCachable) {
-		event.respondWith(async function () {
-			// Try to use cache first
-			const cache = await caches.open(CACHE_NAME);
-			if (event.request.mode === "navigate") {
-				// Check if we have full cache during HTML page request.
-				const fullCache = await Promise.all(FULL_CACHE.map(name => cache.match(name)));
-				const missing = fullCache.some(v => v === undefined);
-				if (missing) {
-					try {
-						// Try network if some cached file is missing (so we can display offline page in case).
-						return await fetchAndCache(event, cache, isCachable);
-					} catch (e) {
-						// And return the hopefully always cached offline page in case of network failure.
-						console.error("Network error: ", e);
-						return await caches.match(OFFLINE_URL);
+self.addEventListener(
+	'fetch',
+	/**
+	 * Triggered on fetch
+	 * @param {FetchEvent} event
+	 */
+	(event) => {
+		const isNavigate = event.request.mode === 'navigate';
+		const url = event.request.url || '';
+		const referrer = event.request.referrer || '';
+		const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
+		const local = url.startsWith(base) ? url.replace(base, '') : '';
+		const isCachable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+		if (isNavigate || isCachable) {
+			event.respondWith((async () => {
+				// Try to use cache first
+				const cache = await caches.open(CACHE_NAME);
+				if (isNavigate) {
+					// Check if we have full cache during HTML page request.
+					/** @type {Response[]} */
+					const fullCache = await Promise.all(FULL_CACHE.map((name) => cache.match(name)));
+					const missing = fullCache.some((v) => v === undefined);
+					if (missing) {
+						try {
+							// Try network if some cached file is missing (so we can display offline page in case).
+							const response = await fetchAndCache(event, cache, isCachable);
+							return response;
+						} catch (e) {
+							// And return the hopefully always cached offline page in case of network failure.
+							console.error('Network error: ', e); // eslint-disable-line no-console
+							return caches.match(OFFLINE_URL);
+						}
 					}
 				}
-			}
-			const cached = await cache.match(event.request);
-			if (cached) {
-				return cached;
-			} else {
+				let cached = await cache.match(event.request);
+				if (cached != null) {
+					if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+						cached = ensureCrossOriginIsolationHeaders(cached);
+					}
+					return cached;
+				}
 				// Try network if don't have it in cache.
-				return await fetchAndCache(event, cache, isCachable);
-			}
-		}());
+				const response = await fetchAndCache(event, cache, isCachable);
+				return response;
+			})());
+		} else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+			event.respondWith((async () => {
+				let response = await fetch(event.request);
+				response = ensureCrossOriginIsolationHeaders(response);
+				return response;
+			})());
+		}
 	}
-});
+);
 
-self.addEventListener("message", (event) => {
+self.addEventListener('message', (event) => {
 	// No cross origin
-	if (event.origin != self.origin) {
+	if (event.origin !== self.origin) {
 		return;
 	}
-	const id = event.source.id || "";
-	const msg = event.data || "";
+	const id = event.source.id || '';
+	const msg = event.data || '';
 	// Ensure it's one of our clients.
 	self.clients.get(id).then(function (client) {
 		if (!client) {
 			return; // Not a valid client.
 		}
-		if (msg === "claim") {
+		if (msg === 'claim') {
 			self.skipWaiting().then(() => self.clients.claim());
-		} else if (msg === "clear") {
+		} else if (msg === 'clear') {
 			caches.delete(CACHE_NAME);
-		} else if (msg === "update") {
-			self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then(all => all.forEach(c => c.navigate(c.url)));
+		} else if (msg === 'update') {
+			self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
 		} else {
 			onClientMessage(event);
 		}