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

run tutorial and widget REPLs in relaxed sandbox
6 years ago · d6b9991d3d
parent 29b4615d9d 2eba76a1a1
commit d6b9991d3d
7 changed files with 13 additions and 42 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- a/site/src/routes/repl/embed.svelte
+++ b/site/src/routes/repl/embed.svelte
@ -1,37 +0,0 @@
-<script context="module">
-	export function preload({ query }) {
-		return {
-			version: query.version,
-			gist: query.gist,
-			example: query.example
-		};
-	}
-</script>
-
-<script>
-	import ReplWidget from '../../components/Repl/ReplWidget.svelte';
-
-	export let version = 'beta';
-	export let gist;
-	export let example;
-</script>
-
-<style>
-	.repl-outer {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: var(--back);
-		overflow: hidden;
-		box-sizing: border-box;
-		--pane-controls-h: 4.2rem;
-	}
-</style>
-
-<div class="repl-outer">
-	{#if process.browser}
-		<ReplWidget {version} {gist} {example} embedded={true}/>
-	{/if}
-</div>
--- 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>
--- 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>