Fix an issue where dev toolbar x-ray didn't escape props content (#10400

)

* fix(toolbar): fix an issue where x-ray didn't escape props content

* test(toolbar): add a test case related to x-ray

* chore: add changeset

.changeset/gentle-gorillas-sit.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes an issue where dev toolbar x-ray didn't escape props content.

packages/astro/e2e/dev-toolbar.test.js

@@ -100,6 +100,34 @@ test.describe('Dev Toolbar', () => {
 		await expect(xrayHighlightTooltip).not.toBeVisible();
 	});
 
+	test('xray escapes props content', async ({ page, astro }) => {
+		let isAlertCalled = false;
+		page.on('dialog', async (dialog) => {
+			isAlertCalled = true;
+			await dialog.accept();
+		});
+
+		await page.goto(astro.resolveUrl('/xray-props-escape'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:xray"]');
+		await appButton.click();
+
+		const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]');
+		const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
+		await expect(xrayHighlight).toBeVisible();
+
+		await xrayHighlight.hover();
+		const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip');
+		await expect(xrayHighlightTooltip).toBeVisible();
+
+		const code = xrayHighlightTooltip.locator('pre > code');
+		await expect(code).toHaveText(
+			JSON.stringify({ name: `<img src='' onerror='alert(1)'>` }, undefined, 2)
+		);
+		expect(isAlertCalled).toBe(false);
+	});
+
 	test('xray shows no islands message when there are none', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/xray-no-islands'));
 

packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-props-escape.astro

@@ -0,0 +1,9 @@
+---
+import { HelloWorld } from '../components/HelloWorld';
+---
+
+<h1>Hello World</h1>
+<HelloWorld
+  name={`<img src='' onerror='alert(1)'>`}
+  client:load
+/>

packages/astro/src/runtime/client/dev-toolbar/apps/xray.ts

@@ -1,3 +1,4 @@
+import { escape as escapeHTML } from 'html-escaper';
 import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js';
 import type { DevToolbarHighlight } from '../ui-library/highlight.js';
 import {
@@ -137,13 +138,14 @@ export default {
 				(prop: any) => !prop[0].startsWith('data-astro-cid-')
 			);
 			if (islandPropsEntries.length > 0) {
+				const stringifiedProps = JSON.stringify(
+					Object.fromEntries(islandPropsEntries.map((prop: any) => [prop[0], prop[1][1]])),
+					undefined,
+					2
+				);
 				tooltip.sections.push({
 					title: 'Props',
-					content: `<pre><code>${JSON.stringify(
-						Object.fromEntries(islandPropsEntries.map((prop: any) => [prop[0], prop[1][1]])),
-						undefined,
-						2
-					)}</code></pre>`,
+					content: `<pre><code>${escapeHTML(stringifiedProps)}</code></pre>`,
 				});
 			}