Validate attribute names on custom HTML elements during SSR (#17251)

* Harden renderHTMLElement to drop invalid attribute names

* update changeset

* Apply suggestion from @matthewp

Author: matthewp

.changeset/quick-otters-attend.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Hardens the handling of attribute rendering when using with custom elements.

packages/astro/src/runtime/server/render/dom.ts

@@ -1,7 +1,7 @@
 import type { SSRResult } from '../../../types/public/internal.js';
 import { markHTMLString } from '../escape.js';
 import { renderSlotToString } from './slot.js';
-import { toAttributeString } from './util.js';
+import { INVALID_ATTR_NAME_CHAR, toAttributeString } from './util.js';
 
 export function componentIsHTMLElement(Component: unknown) {
 	return typeof HTMLElement !== 'undefined' && HTMLElement.isPrototypeOf(Component as object);
@@ -18,6 +18,12 @@ export async function renderHTMLElement(
 	let attrHTML = '';
 
 	for (const attr in props) {
+		// Reject attribute names with characters that could break out of the attribute context.
+		// Without this guard, untrusted prop keys spread onto the element could inject arbitrary
+		// markup or event-handler attributes (XSS). Mirrors the guard in `addAttribute`.
+		if (INVALID_ATTR_NAME_CHAR.test(attr)) {
+			continue;
+		}
 		attrHTML += ` ${attr}="${toAttributeString(await props[attr])}"`;
 	}
 

packages/astro/src/runtime/server/render/util.ts

@@ -15,7 +15,7 @@ const DOUBLE_QUOTE_REGEX = /"/g;
 const STATIC_DIRECTIVES = new Set(['set:html', 'set:text']);
 
 // Per the HTML spec, attribute names must not contain ASCII whitespace, ", ', >, /, or =.
-const INVALID_ATTR_NAME_CHAR = /[\s"'>/=]/;
+export const INVALID_ATTR_NAME_CHAR = /[\s"'>/=]/;
 
 // converts (most) arbitrary strings to valid JS identifiers
 const toIdent = (k: string) =>

packages/astro/test/units/render/html-primitives.test.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict';
-import { describe, it } from 'node:test';
+import { after, before, describe, it } from 'node:test';
 import * as cheerio from 'cheerio';
 import {
 	addAttribute,
@@ -15,6 +15,7 @@ import {
 	Fragment,
 	render as renderTemplate,
 	renderComponent,
+	renderHTMLElement,
 	renderSlot,
 	unescapeHTML,
 } from '../../../dist/runtime/server/index.js';
@@ -263,6 +264,54 @@ describe('spreadAttributes rejects invalid attribute keys', () => {
 	});
 });
 
+describe('renderHTMLElement rejects invalid attribute keys', () => {
+	// renderHTMLElement resolves the tag name through customElements.getName().
+	// In a Node test environment this global doesn't exist, so we stub it.
+	const originalCustomElements = globalThis.customElements;
+	const result = {} as any;
+
+	before(() => {
+		globalThis.customElements = {
+			getName: () => 'my-el',
+		} as any;
+	});
+
+	after(() => {
+		globalThis.customElements = originalCustomElements;
+	});
+
+	it('drops malicious keys while keeping valid ones', async () => {
+		const html = await renderHTMLElement(
+			result,
+			class {} as any,
+			{
+				'onmouseover=alert(document.domain) x': 'y',
+				'x><script>alert(1)</script>': 'z',
+				'data-safe': 'ok',
+			},
+			{},
+		);
+		const output = String(html);
+		assert.ok(output.includes('data-safe="ok"'));
+		assert.ok(!output.includes('onmouseover'));
+		assert.ok(!output.includes('<script>'));
+		assert.ok(!output.includes('alert'));
+	});
+
+	it('preserves namespaced and normal attribute names', async () => {
+		const html = await renderHTMLElement(
+			result,
+			class {} as any,
+			{ 'id': 'a', 'data-foo': 'b', 'on:click': 'c' },
+			{},
+		);
+		const output = String(html);
+		assert.ok(output.includes('id="a"'));
+		assert.ok(output.includes('data-foo="b"'));
+		assert.ok(output.includes('on:click="c"'));
+	});
+});
+
 describe('Correctly serializes boolean attributes (#astro-basic)', async () => {
 	// h1 data-something and h2 not-data-ok are both empty-string boolean-ish attrs
 	it('renders empty-value attribute for data-* attr with no value', () => {