Fixing unsafe HTML constructed from library input (#3316)

navya9singh · web-flow · commit 753e1f88c7c4 · 2025-01-29T13:22:05.000-08:00
diff --git a/packages/playground/src/ds/createDesignSystem.ts b/packages/playground/src/ds/createDesignSystem.ts
@@ -328,7 +328,12 @@ export const createDesignSystem = (sandbox: Sandbox) => {
         if (key === "kind") {
           suffix = ` (SyntaxKind.${info.name})`
         }
-        li.innerHTML = `${key}: <span class='${typeofSpan}'>${value}</span>${suffix}`
+        li.textContent = `${key}: `;
+        const span = document.createElement('span');
+        span.className = typeofSpan;
+        span.textContent = value;
+        li.appendChild(span);
+        li.appendChild(document.createTextNode(suffix));
         return li
       }
 

Original file line number	Diff line number	Diff line change
`@@ -328,7 +328,12 @@ export const createDesignSystem = (sandbox: Sandbox) => {`
`328`	`328`	`if (key === "kind") {`
`329`	`329`	suffix = ` (SyntaxKind.${info.name})`
`330`	`330`	`}`
`331`		- li.innerHTML = `${key}: <span class='${typeofSpan}'>${value}</span>${suffix}`
	`331`	+ li.textContent = `${key}: `;
	`332`	`+ const span = document.createElement('span');`
	`333`	`+ span.className = typeofSpan;`
	`334`	`+ span.textContent = value;`
	`335`	`+ li.appendChild(span);`
	`336`	`+ li.appendChild(document.createTextNode(suffix));`
`332`	`337`	`return li`
`333`	`338`	`}`
`334`	`339`