From 91d7eb6e43156a36cdcc17cbb6dad7dde1587d3f Mon Sep 17 00:00:00 2001
From: navya9singh <navyasingh@microsoft.com>
Date: Wed, 29 Jan 2025 12:48:51 -0800
Subject: [PATCH] fixing unsafe HTML constructed from library input

---
 packages/playground/src/ds/createDesignSystem.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/ds/createDesignSystem.ts b/packages/playground/src/ds/createDesignSystem.ts
index b9e97220dc93..b5511db56bb1 100644
--- 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
       }