fix: don't execute scripts inside @html when instantiated on the client (#10556)

dummdidumm · web-flow · commit 08978bfae870 · 2024-02-20T13:32:51.000+01:00
In Svelte 4, scripts inside `@html` were not executed when it was created client-side. This is because `innerHTML = ..` which was used under the hood does not execute scripts due to security reasons. This adjusts the code so the same is true for Svelte 5.
diff --git a/.changeset/moody-carrots-lay.md b/.changeset/moody-carrots-lay.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: don't execute scripts inside `@html` when instantiated on the client
diff --git a/packages/svelte/src/internal/client/reconciler.js b/packages/svelte/src/internal/client/reconciler.js
@@ -103,7 +103,9 @@ export function reconcile_html(target, value, svg) {
 	if (svg) {
 		html = `<svg>${html}</svg>`;
 	}
-	var content = create_fragment_with_script_from_html(html);
+	// Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.
+	// @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
+	var content = create_fragment_from_html(html);
 	if (svg) {
 		content = /** @type {DocumentFragment} */ (/** @type {unknown} */ (content.firstChild));
 	}
diff --git a/packages/svelte/tests/runtime-browser/samples/html-tag-script/_config.js b/packages/svelte/tests/runtime-browser/samples/html-tag-script/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../assert';
+
+export default test({
+	// Test that @html does not execute scripts when instantiated in the client.
+	// Needs to be in this test suite because JSDOM does not quite get this right.
+	html: `<div></div><script>document.body.innerHTML = 'this should not be executed'</script>`,
+	skip_if_ssr: 'permanent',
+	skip_if_hydrate: 'permanent'
+});
diff --git a/packages/svelte/tests/runtime-browser/samples/html-tag-script/main.svelte b/packages/svelte/tests/runtime-browser/samples/html-tag-script/main.svelte
@@ -0,0 +1,2 @@
+<div></div>
+{@html `<script>document.body.innerHTML = 'this should not be executed'</script>`}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte": patch
 +---
++
 +fix: don't execute scripts inside `@html` when instantiated on the client
Original file line number	Diff line number	Diff line change
`@@ -103,7 +103,9 @@ export function reconcile_html(target, value, svg) {`
`103`	`103`	`if (svg) {`
`104`	`104`	html = `<svg>${html}</svg>`;
`105`	`105`	`}`
`106`		`- var content = create_fragment_with_script_from_html(html);`
	`106`	`+ // Don't use create_fragment_with_script_from_html here because that would mean script tags are executed.`
	`107`	+ // @html is basically `.innerHTML = ...` and that doesn't execute scripts either due to security reasons.
	`108`	`+ var content = create_fragment_from_html(html);`
`107`	`109`	`if (svg) {`
`108`	`110`	`content = /** @type {DocumentFragment} / (/* @type {unknown} */ (content.firstChild));`
`109`	`111`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<div></div>`
	`2`	+{@html `<script>document.body.innerHTML = 'this should not be executed'</script>`}