From 94e51df07b0512de0716a0109d29c8a1d1f1ce20 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Wed, 7 Dec 2022 04:23:23 +0900
Subject: [PATCH] [fix] escape style attribute for SSR (#8087)

---
 src/runtime/internal/ssr.ts                          |  2 +-
 test/runtime/samples/css-vars-escape/Sub.svelte      |  7 +++++++
 test/runtime/samples/css-vars-escape/_config.js      | 12 ++++++++++++
 test/runtime/samples/css-vars-escape/main.svelte     |  6 ++++++
 .../samples/inline-style-directive-escape/_config.js | 12 ++++++++++++
 .../inline-style-directive-escape/main.svelte        |  5 +++++
 6 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/css-vars-escape/Sub.svelte
 create mode 100644 test/runtime/samples/css-vars-escape/_config.js
 create mode 100644 test/runtime/samples/css-vars-escape/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-escape/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-escape/main.svelte

diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
index 571a25f1ac..e6d747dc18 100644
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -205,7 +205,7 @@ export function add_classes(classes) {
 function style_object_to_string(style_object) {
 	return Object.keys(style_object)
 		.filter(key => style_object[key])
-		.map(key => `${key}: ${style_object[key]};`)
+		.map(key => `${key}: ${escape_attribute_value(style_object[key])};`)
 		.join(' ');
 }
 
diff --git a/test/runtime/samples/css-vars-escape/Sub.svelte b/test/runtime/samples/css-vars-escape/Sub.svelte
new file mode 100644
index 0000000000..4781b65b36
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/Sub.svelte
@@ -0,0 +1,7 @@
+<div>hi</div>
+
+<style>
+	div {
+		background-color: var(--color);
+	}
+</style>
diff --git a/test/runtime/samples/css-vars-escape/_config.js b/test/runtime/samples/css-vars-escape/_config.js
new file mode 100644
index 0000000000..04defbdae8
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="display: contents; --color: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+			<div class="svelte-271qee">hi</div>
+		</div>
+	`,
+	ssrHtml: `
+		<div style="display: contents; --color:&quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;">
+			<div class="svelte-271qee">hi</div>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/css-vars-escape/main.svelte b/test/runtime/samples/css-vars-escape/main.svelte
new file mode 100644
index 0000000000..d18e2d57f2
--- /dev/null
+++ b/test/runtime/samples/css-vars-escape/main.svelte
@@ -0,0 +1,6 @@
+<script>
+import Sub from './Sub.svelte';
+  export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
+</script>
+
+<Sub --color={attack} />
diff --git a/test/runtime/samples/inline-style-directive-escape/_config.js b/test/runtime/samples/inline-style-directive-escape/_config.js
new file mode 100644
index 0000000000..31666815d9
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-escape/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="--css-variable: &quot; onload=&quot;alert('uhoh')&quot; data-nothing=&quot;not important;"></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.attack = '" onload="alert(\'uhoh2\')" data-nothing="not important';
+		assert.htmlEqual(target.innerHTML, `
+			<div style="--css-variable: &quot; onload=&quot;alert('uhoh2')&quot; data-nothing=&quot;not important;"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-escape/main.svelte b/test/runtime/samples/inline-style-directive-escape/main.svelte
new file mode 100644
index 0000000000..fd27bfda6a
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-escape/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let attack = '" onload="alert(\'uhoh\')" data-nothing="not important';
+</script>
+
+<div style:--css-variable={attack} />