Merge pull request #2279 from sveltejs/gh-2147-workaround

run tutorial and widget REPLs in relaxed sandbox
sveltejs · Mar 20, 2019 · d6b9991 · d6b9991
2 parents 29b4615 + 2eba76a
commit d6b9991
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 42 deletions.
diff --git a/site/src/components/Repl/Output/Viewer.svelte b/site/src/components/Repl/Output/Viewer.svelte
@@ -15,6 +15,8 @@
 		proxy.setProp(prop, value);
 	}
 
+	export let relaxed = false;
+
 	let iframe;
 	let pending_imports = 0;
 	let pending = false;
@@ -127,7 +129,7 @@
 </style>
 
 <div class="iframe-container">
-	<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" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
+	<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-scripts allow-same-origin' : ''}" class="{error || pending || pending_imports ? 'greyed-out' : ''}" srcdoc='
 		<!doctype html>
 		<html>
 			<head>

diff --git a/site/src/components/Repl/Output/index.svelte b/site/src/components/Repl/Output/index.svelte
@@ -12,6 +12,7 @@
 	export let sourceErrorLoc = null;
 	export let runtimeError = null;
 	export let embedded = false;
+	export let relaxed = false;
 
 	let foo; // TODO workaround for https://github.com/sveltejs/svelte/issues/2122
 
@@ -120,6 +121,7 @@
 	<Viewer
 		bind:this={viewer}
 		bind:error={runtimeError}
+		{relaxed}
 		on:binding="{e => setPropFromViewer(e.detail.prop, e.detail.value)}"
 	/>
 </div>

diff --git a/site/src/components/Repl/ReplWidget.svelte b/site/src/components/Repl/ReplWidget.svelte
@@ -83,6 +83,6 @@
 
 <div class="repl-outer">
 	{#if process.browser}
-		<Repl bind:this={repl} {version} embedded={true}/>
+		<Repl bind:this={repl} {version} embedded={true} relaxed/>
 	{/if}
 </div>
diff --git a/site/src/components/Repl/index.svelte b/site/src/components/Repl/index.svelte
@@ -12,6 +12,7 @@
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let embedded = false;
 	export let orientation = 'columns';
+	export let relaxed = false;
 
 	export function toJSON() {
 		// TODO there's a bug here — Svelte hoists this function because
@@ -222,7 +223,7 @@
 			</section>
 
 			<section slot=b style='height: 100%;'>
-				<Output {version} {embedded}/>
+				<Output {version} {embedded} {relaxed}/>
 			</section>
 		</SplitPane>
 	</div>

diff --git a/site/src/routes/repl/embed.svelte b/site/src/routes/repl/embed.svelte
diff --git a/site/src/routes/repl/index.svelte b/site/src/routes/repl/index.svelte
@@ -23,6 +23,7 @@
 	let gist;
 	let name = 'loading...';
 	let zen_mode = false;
+	let relaxed = false;
 
 	$: if (typeof history !== 'undefined') {
 		const params = [];
@@ -48,6 +49,7 @@
 		}
 
 		if (gist_id) {
+			relaxed = false;
 			fetch(`gist/${gist_id}`).then(r => r.json()).then(data => {
 				gist = data;
 				const { id, description, files } = data;
@@ -88,6 +90,7 @@
 	function load_example(slug) {
 		console.log(`loading ${slug}`);
 
+		relaxed = true;
 		fetch(`examples/${slug}.json`).then(async response => {
 			if (response.ok) {
 				const data = await response.json();
@@ -171,6 +174,6 @@
 	/>
 
 	{#if process.browser}
-		<Repl bind:this={repl} {version}/>
+		<Repl bind:this={repl} {version} {relaxed}/>
 	{/if}
 </div>
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
@@ -239,6 +239,6 @@
 	</div>
 
 	<div class="tutorial-repl">
-		<Repl bind:this={repl} orientation="rows" on:change={handle_change}/>
+		<Repl bind:this={repl} orientation="rows" on:change={handle_change} relaxed/>
 	</div>
 </div>