Deprecate unescaped HTML inside of expressions (#2489)

* feat: implement automatic escaping

* feat: deprecate automatic escaping

* fix: cast unescapeHTML as string

* fix: slot fallback behavior

* fix: unescaped content

* Update escape.ts

* Update escape.ts

* feat: update internal components to use `set:html`

* chore: update compiler

* chore: update changeset

.changeset/chatty-spies-wink.md

@@ -0,0 +1,8 @@
+---
+'astro': minor
+---
+
+Add support for the `set:html` and `set:text` directives. 
+
+With the introduction of these directives, unescaped HTML content in expressions is now deprecated. Please migrate to `set:html` in order to continue injecting unescaped HTML in future versions of Astro—you can use `<Fragment set:html={content}>` to avoid a wrapper element. `set:text` allows you to opt-in to escaping now, but it will soon become the default.
+

.changeset/mighty-lamps-drive.md

@@ -2,4 +2,4 @@
 'astro': patch
 ---
 
-Bug fix for define:vars with the --experimental-static-build flag
+Bug fix for `define:vars` with the --experimental-static-build flag

packages/astro/components/Code.astro

@@ -47,4 +47,4 @@ const _html = highlighter.codeToHtml(code, lang);
 const html = repairShikiTheme(_html);
 ---
 
-{html}
+<Fragment set:html={html} />

packages/astro/components/Markdown.astro

@@ -41,4 +41,4 @@ if (content) {
 html = htmlContent;
 ---
 
-{html ? html : <slot />}
+{html ? <Fragment set:html={html} /> : <slot />}

packages/astro/components/Prism.astro

@@ -46,4 +46,4 @@ if (grammar) {
 }
 ---
 
-<pre class={[className, classLanguage].join(' ')}><code class={classLanguage}>{html}</code></pre>
+<pre class={[className, classLanguage].join(' ')}><code class={classLanguage}><Fragment set:html={html} /></code></pre>

packages/astro/package.json

@@ -55,7 +55,7 @@
     "test:match": "mocha --timeout 15000 -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.10.0",
+    "@astrojs/compiler": "^0.10.1",
     "@astrojs/language-server": "^0.8.6",
     "@astrojs/markdown-remark": "^0.6.0",
     "@astrojs/prism": "0.4.0",

packages/astro/src/runtime/server/escape.ts

@@ -1,3 +1,34 @@
 const entities = { '"': 'quot', '&': 'amp', "'": 'apos', '<': 'lt', '>': 'gt' } as const;
 
-export const escapeHTML = (string: any) => string.replace(/["'&<>]/g, (char: keyof typeof entities) => '&' + entities[char] + ';');
+const warned = new Set<string>();
+export const escapeHTML = (string: any, { deprecated = false }: { deprecated?: boolean } = {}) => {
+	const escaped = string.replace(/["'&<>]/g, (char: keyof typeof entities) => '&' + entities[char] + ';');
+	if (!deprecated) return escaped;
+	if (warned.has(string) || !string.match(/[&<>]/g)) return string;
+	// eslint-disable-next-line no-console
+	console.warn(`Unescaped HTML content found inside expression!
+
+The next minor version of Astro will automatically escape all
+expression content. Please use the \`set:html\` directive.
+
+Expression content:
+${string}`);
+	warned.add(string);
+
+	// Return unescaped content for now. To be removed.
+	return string;
+}
+
+/**
+ * RawString is a "blessed" version of String
+ * that is not subject to escaping.
+ */
+export class UnescapedString extends String {}
+
+/** 
+ * unescapeHTML marks a string as raw, unescaped HTML. 
+ * This should only be generated internally, not a public API.
+ *
+ * Need to cast the return value `as unknown as string` so TS doesn't yell at us.
+ */
+export const unescapeHTML = (str: any) => new UnescapedString(str) as unknown as string;

packages/astro/src/runtime/server/index.ts

@@ -4,9 +4,11 @@ import type { AstroGlobalPartial, SSRResult, SSRElement } from '../../@types/ast
 import shorthash from 'shorthash';
 import { extractDirectives, generateHydrateScript } from './hydration.js';
 import { serializeListValue } from './util.js';
-export { createMetadata } from './metadata.js';
-export { escapeHTML } from './escape.js';
+import { escapeHTML, UnescapedString, unescapeHTML } from './escape.js';
+
 export type { Metadata } from './metadata';
+export { createMetadata } from './metadata.js';
+export { escapeHTML, unescapeHTML } from './escape.js';
 
 const voidElementNames = /^(area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i;
 
@@ -19,22 +21,24 @@ const voidElementNames = /^(area|base|br|col|command|embed|hr|img|input|keygen|l
 // Or maybe type UserValue = any; ?
 async function _render(child: any): Promise<any> {
 	child = await child;
-	if (Array.isArray(child)) {
-		return (await Promise.all(child.map((value) => _render(value)))).join('');
+	if (child instanceof UnescapedString) {
+		return child;
+	} else if (Array.isArray(child)) {
+		return unescapeHTML((await Promise.all(child.map((value) => _render(value)))).join(''));
 	} else if (typeof child === 'function') {
 		// Special: If a child is a function, call it automatically.
 		// This lets you do {() => ...} without the extra boilerplate
 		// of wrapping it in a function and calling it.
 		return _render(child());
 	} else if (typeof child === 'string') {
-		return child;
+		return escapeHTML(child, { deprecated: true });
 	} else if (!child && child !== 0) {
 		// do nothing, safe to ignore falsey values.
 	}
 	// Add a comment explaining why each of these are needed.
 	// Maybe create clearly named function for what this is doing.
 	else if (child instanceof AstroComponent || Object.prototype.toString.call(child) === '[object AstroComponent]') {
-		return await renderAstroComponent(child);
+		return unescapeHTML(await renderAstroComponent(child));
 	} else {
 		return child;
 	}
@@ -62,7 +66,7 @@ export class AstroComponent {
 			const html = htmlParts[i];
 			const expression = expressions[i];
 
-			yield _render(html);
+			yield _render(unescapeHTML(html));
 			yield _render(expression);
 		}
 	}
@@ -88,7 +92,7 @@ export function createComponent(cb: AstroComponentFactory) {
 
 export async function renderSlot(_result: any, slotted: string, fallback?: any) {
 	if (slotted) {
-		return _render(slotted);
+		return await _render(slotted);
 	}
 	return fallback;
 }
@@ -122,12 +126,12 @@ export async function renderComponent(result: SSRResult, displayName: string, Co
 	const children = await renderSlot(result, slots?.default);
 
 	if (Component === Fragment) {
-		return children;
+		return unescapeHTML(children);
 	}
 
 	if (Component && (Component as any).isAstroComponentFactory) {
 		const output = await renderToString(result, Component as any, _props, slots);
-		return output;
+		return unescapeHTML(output);
 	}
 
 	if (Component === null && !_props['client:only']) {
@@ -233,7 +237,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 	// as a string and the user is responsible for adding a script tag for the component definition.
 	if (!html && typeof Component === 'string') {
 		html = await renderAstroComponent(
-			await render`<${Component}${spreadAttributes(props)}${(children == null || children == '') && voidElementNames.test(Component) ? `/>` : `>${children}</${Component}>`}`
+			await render`<${Component}${spreadAttributes(props)}${unescapeHTML((children == null || children == '') && voidElementNames.test(Component) ? `/>` : `>${children}</${Component}>`)}`
 		);
 	}
 
@@ -248,7 +252,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 	}
 
 	if (!hydration) {
-		return html.replace(/\<\/?astro-fragment\>/g, '');
+		return unescapeHTML(html.replace(/\<\/?astro-fragment\>/g, ''));
 	}
 
 	// Include componentExport name and componentUrl in hash to dedupe identical islands
@@ -258,7 +262,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 	// INVESTIGATE: This will likely be a problem in streaming because the `<head>` will be gone at this point.
 	result.scripts.add(await generateHydrateScript({ renderer, result, astroId, props }, metadata as Required<AstroComponentMetadata>));
 
-	return `<astro-root uid="${astroId}">${html ?? ''}</astro-root>`;
+	return unescapeHTML(`<astro-root uid="${astroId}">${html ?? ''}</astro-root>`);
 }
 
 /** Create the Astro.fetchContent() runtime function. */
@@ -336,14 +340,14 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 
 	// support "class" from an expression passed into an element (#782)
 	if (key === 'class:list') {
-		return ` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`;
+		return unescapeHTML(` ${key.slice(0, -5)}="${toAttributeString(serializeListValue(value))}"`);
 	}
 
 	// Boolean only needs the key
 	if (value === true && key.startsWith('data-')) {
-		return ` ${key}`;
+		return unescapeHTML(` ${key}`);
 	} else {
-		return ` ${key}="${toAttributeString(value)}"`;
+		return unescapeHTML(` ${key}="${toAttributeString(value)}"`);
 	}
 }
 
@@ -353,7 +357,7 @@ export function spreadAttributes(values: Record<any, any>) {
 	for (const [key, value] of Object.entries(values)) {
 		output += addAttribute(value, key);
 	}
-	return output;
+	return unescapeHTML(output);
 }
 
 // Adds CSS variables to an inline style tag
@@ -378,7 +382,7 @@ export function defineScriptVars(vars: Record<any, any>) {
 export async function renderToString(result: SSRResult, componentFactory: AstroComponentFactory, props: any, children: any) {
 	const Component = await componentFactory(result, props, children);
 	let template = await renderAstroComponent(Component);
-	return template;
+	return unescapeHTML(template);
 }
 
 // Filter out duplicate elements in our set
@@ -431,15 +435,15 @@ export async function renderPage(result: SSRResult, Component: AstroComponentFac
 }
 
 export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {
-	let template = '';
+	let template = [];
 
 	for await (const value of component) {
 		if (value || value === 0) {
-			template += value;
+			template.push(value);
 		}
 	}
 
-	return template;
+	return unescapeHTML(await _render(template));
 }
 
 export async function renderHTMLElement(result: SSRResult, constructor: typeof HTMLElement, props: any, slots: any) {

yarn.lock

@@ -130,10 +130,10 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@astrojs/compiler@^0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.10.0.tgz#6ba2707bf9a91017fd72fb46b1d7865036b71c09"
-  integrity sha512-TbeuITyhRGlQowipNX7Q8o5QczVjSxlE68xKh7i1swTxUhM8K/cnCPSyzTsWiuFWY4C5PDI1GREUaD3BHYfzqQ==
+"@astrojs/compiler@^0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.10.1.tgz#69df1a7e4150c1b0b255154ae716dbc8b24c5dd4"
+  integrity sha512-SUp5auq6jcLmxyOx8Ovd3ebvwR5wnuqsbIi77Ze/ua3+GMcR++rOWiyqyql887U2ajZMwJfHatOwQl67P7o5gg==
   dependencies:
     typescript "^4.3.5"