fix: add escape for ui

src/tests/mcp-ui-utils.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, test } from '@jest/globals';
+
+import { createLocatorGeneratorUI } from '../ui/mcp-ui-utils.js';
+
+describe('createLocatorGeneratorUI', () => {
+  test('escapes locator metadata and selectors before rendering HTML', () => {
+    const html = createLocatorGeneratorUI([
+      {
+        tagName: 'android.widget.TextView<script>alert(1)</script>',
+        locators: {
+          "id' onclick='alert(1)":
+            'com.attacker.app/`<img src=x onerror=alert(1)>',
+        },
+        text: "<img src=x onerror=\"window.parent.postMessage({type:'tool'},'*')\">",
+        contentDesc: '<b>xss-in-contentDesc</b>',
+        resourceId: 'com.attacker.app/<u>xss-resource-id</u>',
+        clickable: true,
+        enabled: true,
+        displayed: true,
+      },
+    ]);
+
+    expect(html).not.toContain('<h3>android.widget.TextView<script');
+    expect(html).not.toContain('<img src=x onerror=');
+    expect(html).not.toContain('<b>xss-in-contentDesc</b>');
+    expect(html).not.toContain('<u>xss-resource-id</u>');
+    expect(html).not.toContain('onclick="testLocator');
+    expect(html).not.toContain("onclick='alert");
+
+    expect(html).toContain(
+      '&lt;img src=x onerror=&quot;window.parent.postMessage({type:&#039;tool&#039;},&#039;*&#039;)&quot;&gt;'
+    );
+    expect(html).toContain('&lt;b&gt;xss-in-contentDesc&lt;/b&gt;');
+    expect(html).toContain('&lt;u&gt;xss-resource-id&lt;/u&gt;');
+    expect(html).toContain(
+      'data-selector="com.attacker.app/`&lt;img src=x onerror=alert(1)&gt;"'
+    );
+  });
+});

src/ui/mcp-ui-utils.ts

@@ -720,24 +720,24 @@ export function createLocatorGeneratorUI(
       (element, index) => `
     <div class="locator-card" data-index="${index}">
       <div class="locator-header">
-        <h3>${element.tagName}</h3>
+        <h3>${escapeHtml(element.tagName)}</h3>
         <div class="badges">
           ${element.clickable ? '<span class="badge badge-clickable">Clickable</span>' : ''}
           ${element.enabled ? '<span class="badge badge-enabled">Enabled</span>' : ''}
           ${element.displayed ? '<span class="badge badge-displayed">Displayed</span>' : ''}
         </div>
       </div>
-      ${element.text ? `<p class="element-text"><strong>Text:</strong> ${element.text}</p>` : ''}
-      ${element.contentDesc ? `<p class="element-text"><strong>Content Desc:</strong> ${element.contentDesc}</p>` : ''}
-      ${element.resourceId ? `<p class="element-text"><strong>Resource ID:</strong> <code>${element.resourceId}</code></p>` : ''}
+      ${element.text ? `<p class="element-text"><strong>Text:</strong> ${escapeHtml(element.text)}</p>` : ''}
+      ${element.contentDesc ? `<p class="element-text"><strong>Content Desc:</strong> ${escapeHtml(element.contentDesc)}</p>` : ''}
+      ${element.resourceId ? `<p class="element-text"><strong>Resource ID:</strong> <code>${escapeHtml(element.resourceId)}</code></p>` : ''}
       <div class="locators-list">
         ${Object.entries(element.locators)
           .map(
             ([strategy, selector]) => `
           <div class="locator-item">
-            <span class="strategy">${strategy}</span>
-            <code class="selector">${selector}</code>
-            <button class="test-btn" onclick="testLocator('${strategy}', \`${selector.replace(/`/g, '\\`')}\`)">Test</button>
+            <span class="strategy">${escapeHtml(strategy)}</span>
+            <code class="selector">${escapeHtml(selector)}</code>
+            <button class="test-btn" data-strategy="${escapeHtml(strategy)}" data-selector="${escapeHtml(selector)}">Test</button>
           </div>
         `
           )
@@ -895,6 +895,16 @@ export function createLocatorGeneratorUI(
         }
       }, '*');
     }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target;
+      const button = target instanceof Element ? target.closest('.test-btn') : null;
+      if (!button) {
+        return;
+      }
+
+      testLocator(button.dataset.strategy || '', button.dataset.selector || '');
+    });
   </script>
 </body>
 </html>
@@ -1633,3 +1643,12 @@ export function addUIResourceToResponse(
     content: [...response.content, uiResource],
   };
 }
+
+function escapeHtml(value: unknown): string {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}