Fix html attribute escaping

.changeset/quiet-items-behave.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Fix escaped html attributes

packages/kit/src/utils/escape.js

@@ -57,20 +57,25 @@ function escape(str, dict, unicode_encoder) {
 	return result;
 }
 
-/** @type {Record<string, string>} */
+/**
+ * When inside a double-quoted attribute value, only `&` and `"` hold special meaning.
+ * @see https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state
+ * @type {Record<string, string>}
+ */
 const escape_html_attr_dict = {
-	'<': '&lt;',
-	'>': '&gt;',
+	'&': '&amp;',
 	'"': '&quot;'
 };
 
 /**
- * use for escaping string values to be used html attributes on the page
- * e.g.
- * <script data-url="here">
+ * Formats a string to be used as an attribute's value in raw HTML.
+ *
+ * It escapes unpaired surrogates (which are allowed in js strings but invalid in HTML), escapes
+ * characters that are special in attributes, and surrounds the whole string in double-quotes.
  *
  * @param {string} str
- * @returns string escaped string
+ * @returns {string} Escaped string surrounded by double-quotes.
+ * @example const html = `<tag data-value=${escape_html_attr('value')}>...</tag>`;
  */
 export function escape_html_attr(str) {
 	return '"' + escape(str, escape_html_attr_dict, (code) => `&#${code};`) + '"';

packages/kit/src/utils/escape.spec.js

@@ -0,0 +1,24 @@
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import { escape_html_attr } from './escape.js';
+
+const attr = suite('escape_html_attr');
+
+attr('escapes special attribute characters', () => {
+	assert.equal(
+		escape_html_attr('some "values" are &special here, <others> aren\'t.'),
+		'"some &quot;values&quot; are &amp;special here, <others> aren\'t."'
+	);
+});
+
+attr('escapes invalid surrogates', () => {
+	assert.equal(escape_html_attr('\ud800\udc00'), '"\ud800\udc00"');
+	assert.equal(escape_html_attr('\ud800'), '"&#55296;"');
+	assert.equal(escape_html_attr('\udc00'), '"&#56320;"');
+	assert.equal(escape_html_attr('\udc00\ud800'), '"&#56320;&#55296;"');
+	assert.equal(escape_html_attr('\ud800\ud800\udc00'), '"&#55296;\ud800\udc00"');
+	assert.equal(escape_html_attr('\ud800\udc00\udc00'), '"\ud800\udc00&#56320;"');
+	assert.equal(escape_html_attr('\ud800\ud800\udc00\udc00'), '"&#55296;\ud800\udc00&#56320;"');
+});
+
+attr.run();

packages/kit/test/prerendering/basics/test/test.js

@@ -33,7 +33,7 @@ test('escapes characters in redirect', () => {
 	const content = read('redirect-malicious.html');
 	assert.equal(
 		content,
-		'<meta http-equiv="refresh" content="0;url=https://example.com/&lt;/script&gt;alert(&quot;pwned&quot;)">'
+		'<meta http-equiv="refresh" content="0;url=https://example.com/</script>alert(&quot;pwned&quot;)">'
 	);
 });