chore: cleanup headers, remove obsolete workarounds (#311)

* chore: cleanup headers, remove obsolete workarounds

#301 wasn't quite finished, this does finalize the work:
- ensure cross origin headers are only set on SvelteKit tutorial pages
- remove obsolete workarounds for getting cross origin iframes/images/audio/video working

* try this

apps/svelte.dev/content/blog/2019-01-31-svelte-on-the-changelog.md

@@ -18,4 +18,4 @@ Unless you hang out in our [Discord server](https://svelte.dev/chat) or follow [
 
 On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
 
-<audio crossorigin="anonymous" data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>
+<audio data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>

apps/svelte.dev/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md

@@ -24,7 +24,7 @@ To make that possible we first needed to rethink the concept at the heart of mod
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/AdNJ3fydeao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/AdNJ3fydeao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>'Rethinking Reactivity' from <a href="https://www.israel.yglfconf.com/">You Gotta Love Frontend Code Camp</a></figcaption>

apps/svelte.dev/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md

@@ -16,7 +16,7 @@ This was slightly tongue-in-cheek — as the talk explains, it's really more of
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>'Futuristic Web Development' from <a href="https://sveltesummit.com/">Svelte Summit</a></figcaption>

apps/svelte.dev/content/blog/2022-12-14-announcing-sveltekit-1.0.md

@@ -14,7 +14,7 @@ To get started, run `npm create svelte@latest`, and visit the [docs](https://kit
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
-	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/N4BRVkQVoMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/N4BRVkQVoMc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>Svelte Radio Live: the Christmas special</figcaption>

apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md

@@ -11,7 +11,7 @@ But what if we didn't even need the annotations? Since `load` and `data` are par
 
 As of today, yes: it can.
 
-<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/zero-config-types.mp4" controls muted playsinline></video>
+<video src="https://sveltejs.github.io/assets/video/zero-config-types.mp4" controls muted playsinline></video>
 
 If you're using VSCode, just upgrade the Svelte extension to the latest version, and you'll never have to annotate your `load` functions or `data` props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool `svelte-check`!
 

apps/svelte.dev/content/blog/2023-08-31-view-transitions.md

@@ -74,7 +74,7 @@ onNavigate((navigation) => {
 
 With that, every navigation that occurs will trigger a view transition. You can already see this in action – by default, the browser will crossfade between the old and new pages.
 
-<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/vt-demo-1.mp4" controls muted playsinline></video>
+<video src="https://sveltejs.github.io/assets/video/vt-demo-1.mp4" controls muted playsinline></video>
 
 <details>
 <summary>How the code works</summary>
@@ -161,7 +161,7 @@ header {
 
 Now, the header will not transition in and out on navigation, but the rest of the page will.
 
-<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/vt-demo-2.mp4" controls muted playsinline></video>
+<video src="https://sveltejs.github.io/assets/video/vt-demo-2.mp4" controls muted playsinline></video>
 
 <details>
 <summary>Fixing the types</summary>
@@ -213,7 +213,7 @@ li[aria-current='page']::before {
 
 By adding that single line, the indicator will now smoothly slide to its new position instead of jumping.
 
-<video crossorigin="anonymous" src="https://sveltejs.github.io/assets/video/vt-demo-3.mp4" controls muted playsinline></video>
+<video src="https://sveltejs.github.io/assets/video/vt-demo-3.mp4" controls muted playsinline></video>
 
 (It might be easy to miss the difference – look at the small moving triangle indicator at the top of the screen!)
 

apps/svelte.dev/content/blog/2023-09-20-runes.md

@@ -31,7 +31,7 @@ Svelte 5 changes all that with _runes_, which unlock _universal, fine-grained re
 <div class="max">
 <figure style="max-width: 960px; margin: 0 auto">
 <div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
-	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/RVnxF3j3N8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/RVnxF3j3N8U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>Introducing runes</figcaption>

apps/svelte.dev/content/blog/2024-04-30-svelte-5-release-candidate.md

@@ -30,7 +30,7 @@ You can learn more about the new features from the [preview documentation](https
 <div class="max">
 <figure style="max-width: 1040px; margin: 0 auto">
 <div style="aspect-ratio: 1.755; position: relative; margin: 0 auto;">
-	<iframe credentialless style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/xCeYmdukOKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <figcaption>What You Can Do For Your Framework</figcaption>

apps/svelte.dev/content/examples/18-module-context/01-module-exports/+assets/AudioPlayer.svelte

@@ -37,7 +37,7 @@
 	<h2>{title}</h2>
 	<p><strong>{composer}</strong> / performed by {performer}</p>
 
-	<audio crossorigin="anonymous" bind:this={audio} bind:paused onplay={stopOthers} controls {src}></audio>
+	<audio bind:this={audio} bind:paused onplay={stopOthers} controls {src}></audio>
 </article>
 
 <style>

apps/svelte.dev/src/routes/_home/Video.svelte

@@ -88,7 +88,6 @@
 	<video
 		src="https://sveltejs.github.io/assets/svelte-origins-preview.mp4"
 		loop
-		crossorigin="anonymous"
 		playsinline
 		bind:this={video}
 		bind:muted

apps/svelte.dev/src/routes/blog/[slug]/card.png/Card.svelte

@@ -5,11 +5,7 @@
 </script>
 
 <div class="card">
-	<img
-		crossorigin="anonymous"
-		src="https://sveltejs.github.io/assets/artwork/svelte-machine.png"
-		alt="Svelte Machine"
-	/>
+	<img src="https://sveltejs.github.io/assets/artwork/svelte-machine.png" alt="Svelte Machine" />
 
 	<div class="text">
 		<h1>{title}</h1>

apps/svelte.dev/vercel.json

@@ -2,7 +2,24 @@
 	"$schema": "https://openapi.vercel.sh/vercel.json",
 	"headers": [
 		{
-			"source": "/(.*)",
+			"source": "/_app/immutable/workers/(.*)",
+			"headers": [
+				{
+					"key": "cross-origin-opener-policy",
+					"value": "same-origin"
+				},
+				{
+					"key": "cross-origin-embedder-policy",
+					"value": "require-corp"
+				},
+				{
+					"key": "cross-origin-resource-policy",
+					"value": "cross-origin"
+				}
+			]
+		},
+		{
+			"source": "/tutorial/kit/(.*)",
 			"headers": [
 				{
 					"key": "cross-origin-opener-policy",

apps/svelte.dev/vite.config.ts

@@ -11,18 +11,22 @@ const plugins: PluginOption[] = [
 	{
 		name: 'cross-origin-isolation-for-preview',
 		configurePreviewServer: (server) => {
-			server.middlewares.use((_, res, next) => {
-				res.setHeader('cross-origin-opener-policy', 'same-origin');
-				res.setHeader('cross-origin-embedder-policy', 'require-corp');
-				res.setHeader('cross-origin-resource-policy', 'cross-origin');
+			server.middlewares.use((req, res, next) => {
+				if (req.url?.startsWith('/tutorial/kit')) {
+					res.setHeader('cross-origin-opener-policy', 'same-origin');
+					res.setHeader('cross-origin-embedder-policy', 'require-corp');
+					res.setHeader('cross-origin-resource-policy', 'cross-origin');
+				}
 				next();
 			});
 		},
 		configureServer: (server) => {
-			server.middlewares.use((_, res, next) => {
-				res.setHeader('cross-origin-opener-policy', 'same-origin');
-				res.setHeader('cross-origin-embedder-policy', 'require-corp');
-				res.setHeader('cross-origin-resource-policy', 'cross-origin');
+			server.middlewares.use((req, res, next) => {
+				if (req.url?.startsWith('/tutorial/kit')) {
+					res.setHeader('cross-origin-opener-policy', 'same-origin');
+					res.setHeader('cross-origin-embedder-policy', 'require-corp');
+					res.setHeader('cross-origin-resource-policy', 'cross-origin');
+				}
 				next();
 			});
 		}

packages/repl/src/lib/workers/bundler/index.ts

@@ -324,16 +324,7 @@ async function get_bundle(
 
 			const cached_file = local_files_lookup.get(resolved);
 			if (cached_file) {
-				let code = cached_file.source;
-
-				// rather than remembering to add this attribute to every <audio>
-				// element, and having to explain it in the exercise text, we
-				// automate the cross-origin isolation requirement
-				if (cached_file.type === 'svelte') {
-					code = code.replace(/<audio/g, '<audio crossorigin="anonymous"');
-				}
-
-				return code;
+				return cached_file.source;
 			}
 
 			if (!FETCH_CACHE.has(resolved)) {