chore: tighten up REPL security (#300)

* chore: tighten up REPL security

- don't allow top level navigations without user interaction (prevents stuff like an eager `window.load()`)
- don't allow links to other pages to escape sandbox restrictions (as a result most links don't work) if you're visiting a hashed REPL (we can't remove malicious code from them since code is encoded into the URL)

* Update packages/repl/src/lib/Output/Viewer.svelte

Co-authored-by: Rich Harris <[email protected]>

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -8,6 +8,7 @@
 	import { mapbox_setup } from '../../../../config.js';
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
+	import { page } from '$app/stores';
 
 	let { data } = $props();
 
@@ -18,6 +19,10 @@
 	let version = data.version;
 	let setting_hash: any = null;
 
+	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
+	// don't allow links to escape the sandbox restrictions
+	const can_escape = browser && !$page.url.hash;
+
 	onMount(() => {
 		if (version !== 'local') {
 			fetch(`https://unpkg.com/svelte@${version}/package.json`)
@@ -127,6 +132,7 @@
 			bind:this={repl}
 			{svelteUrl}
 			{relaxed}
+			{can_escape}
 			vim={data.vim}
 			injectedJS={mapbox_setup}
 			showModified

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -50,6 +50,7 @@
 			bind:this={repl}
 			{svelteUrl}
 			{relaxed}
+			can_escape
 			injectedJS={mapbox_setup}
 			showModified
 			showAst

apps/svelte.dev/src/routes/tutorial/[slug]/OutputRollup.svelte

@@ -34,6 +34,7 @@
 	{#if browser}
 		<Viewer
 			relaxed
+			can_escape
 			onLog={(l: Log[]) => logs = l}
 			{bundle}
 			theme={$theme.current}

packages/repl/src/lib/Output/Output.svelte

@@ -13,6 +13,7 @@
 	export let runtimeError: Error | null = null;
 	export let embedded = false;
 	export let relaxed = false;
+	export let can_escape = false;
 	export let injectedJS: string;
 	export let injectedCSS: string;
 	export let showAst = false;
@@ -61,6 +62,7 @@
 		bind:error={runtimeError}
 		{status}
 		{relaxed}
+		{can_escape}
 		{injectedJS}
 		{injectedCSS}
 		theme={previewTheme}

packages/repl/src/lib/Output/Viewer.svelte

@@ -18,6 +18,8 @@
 	export let status: string | null;
 	/** sandbox allow-same-origin */
 	export let relaxed = false;
+	/** sandbox allow-popups-to-escape-sandbox (i.e. links within the REPL to other pages work) */
+	export let can_escape = false;
 	/** Any additional JS you may want to inject */
 	export let injectedJS = '';
 	/** Any additional CSS you may want to inject */
@@ -247,13 +249,12 @@
 		class:inited
 		bind:this={iframe}
 		sandbox={[
-			'allow-popups-to-escape-sandbox',
 			'allow-scripts',
 			'allow-popups',
 			'allow-forms',
 			'allow-pointer-lock',
-			'allow-top-navigation',
 			'allow-modals',
+			can_escape ? 'allow-popups-to-escape-sandbox' : '',
 			relaxed ? 'allow-same-origin' : ''
 		].join(' ')}
 		class={error || pending || pending_imports ? 'greyed-out' : ''}
@@ -269,27 +270,7 @@
 	{#if !onLog}
 		<PaneWithPanel pos="90%" panel="Console">
 			<div slot="main">
-				<iframe
-					title="Result"
-					class:inited
-					bind:this={iframe}
-					sandbox={[
-						'allow-popups-to-escape-sandbox',
-						'allow-scripts',
-						'allow-popups',
-						'allow-forms',
-						'allow-pointer-lock',
-						'allow-top-navigation',
-						'allow-modals',
-						relaxed ? 'allow-same-origin' : ''
-					].join(' ')}
-					class={error || pending || pending_imports ? 'greyed-out' : ''}
-					srcdoc={BROWSER ? srcdoc : ''}
-				></iframe>
-
-				{#if $bundle?.error}
-					<ErrorOverlay error={$bundle.error} />
-				{/if}
+				{@render main()}
 			</div>
 
 			<div slot="panel-header">

packages/repl/src/lib/Repl.svelte

@@ -20,6 +20,7 @@
 	export let embedded = false;
 	export let orientation: 'columns' | 'rows' = 'columns';
 	export let relaxed = false;
+	export let can_escape = false;
 	export let fixed = false;
 	export let fixedPos = 50;
 	export let injectedJS = '';
@@ -312,6 +313,7 @@
 					status={status_visible ? status : null}
 					{embedded}
 					{relaxed}
+					{can_escape}
 					{injectedJS}
 					{injectedCSS}
 					{showAst}