@seed-ship/mcp-ui-solid 6.9.0 → 6.11.0

package/src/components/MapRenderer.markers.test.ts

@@ -0,0 +1,68 @@
+/**
+ * v6.11.0 — map hardening.
+ *
+ * Covers the marker tooltip/popup escaping wiring (audit P1.2 completion: the
+ * `bindMarkerContent` helper shipped in v6.10.0 but the marker loops still
+ * bound raw HTML until v6.11.0) and the `popupSafeText` contract reused by the
+ * PMTiles-failure path (P1.3).
+ */
+
+import { describe, it, expect } from 'vitest'
+import { bindMarkerContent, popupSafeText } from './MapRenderer'
+
+const XSS = '<img src=x onerror=alert(1)>'
+
+// Minimal Leaflet marker stub recording what gets bound.
+function fakeMarker() {
+  const calls: { tooltip?: string; popup?: string } = {}
+  return {
+    calls,
+    bindTooltip(html: string) {
+      calls.tooltip = html
+      return this
+    },
+    bindPopup(html: string) {
+      calls.popup = html
+      return this
+    },
+  }
+}
+
+describe('bindMarkerContent (audit P1.2 wiring)', () => {
+  it('escapes marker tooltip/popup by default (untrusted host)', () => {
+    const m = fakeMarker()
+    bindMarkerContent(m, { tooltip: XSS, popup: XSS }, false)
+    expect(m.calls.tooltip).not.toContain('<img')
+    expect(m.calls.tooltip).toContain('&lt;img')
+    expect(m.calls.popup).not.toContain('<img')
+    expect(m.calls.popup).toContain('&lt;img')
+  })
+
+  it('passes raw HTML through only when the host opts in (allowHtml=true)', () => {
+    const m = fakeMarker()
+    bindMarkerContent(m, { tooltip: XSS, popup: XSS }, true)
+    expect(m.calls.tooltip).toBe(XSS)
+    expect(m.calls.popup).toBe(XSS)
+  })
+
+  it('binds nothing when tooltip/popup are absent', () => {
+    const m = fakeMarker()
+    bindMarkerContent(m, {}, false)
+    expect(m.calls.tooltip).toBeUndefined()
+    expect(m.calls.popup).toBeUndefined()
+  })
+})
+
+describe('popupSafeText', () => {
+  it('escapes by default', () => {
+    expect(popupSafeText(XSS)).toBe('&lt;img src=x onerror=alert(1)&gt;')
+  })
+
+  it('is identity when the host trusts the payload', () => {
+    expect(popupSafeText(XSS, true)).toBe(XSS)
+  })
+
+  it('returns undefined for missing values', () => {
+    expect(popupSafeText(undefined)).toBeUndefined()
+  })
+})

package/src/components/MapRenderer.security.test.ts

@@ -0,0 +1,83 @@
+/**
+ * MapRenderer XSS hardening tests (audit P1.2, v6.10.0).
+ *
+ * Leaflet renders bound tooltip/popup strings as HTML, so untrusted payload
+ * content (`marker.tooltip`, `marker.popup`, GeoJSON `popup.template`) is an
+ * XSS vector. These lock the safe-by-default behavior and the host opt-in,
+ * via the pure exported helpers (the Leaflet binding itself is a thin wrapper
+ * and not exercisable in jsdom).
+ */
+
+import { describe, it, expect } from 'vitest';
+import { popupSafeText, buildPopupContent } from './MapRenderer';
+
+const XSS = '<img src=x onerror=alert(1)>';
+
+describe('popupSafeText — marker tooltip/popup (P1.2)', () => {
+  it('escapes HTML by default (untrusted payload path)', () => {
+    const out = popupSafeText(XSS);
+    expect(out).toBe('&lt;img src=x onerror=alert(1)&gt;');
+    expect(out).not.toContain('<img');
+  });
+
+  it('escapes < > & " so no tag can be injected', () => {
+    expect(popupSafeText('a & b <c> "d"')).toBe('a &amp; b &lt;c&gt; &quot;d&quot;');
+  });
+
+  it('passes raw HTML through when the host opts in (trusted)', () => {
+    expect(popupSafeText(XSS, true)).toBe(XSS);
+  });
+
+  it('returns undefined for absent content', () => {
+    expect(popupSafeText(undefined)).toBeUndefined();
+    expect(popupSafeText(undefined, true)).toBeUndefined();
+  });
+
+  it('leaves plain text visually unchanged', () => {
+    expect(popupSafeText('Paris')).toBe('Paris');
+  });
+});
+
+describe('buildPopupContent — GeoJSON popup (P1.2)', () => {
+  const feature = (props: Record<string, unknown>) => ({ properties: props });
+
+  it('ignores a raw `popup.template` on the default (untrusted) path', () => {
+    const html = buildPopupContent(
+      feature({ name: 'Zone' }),
+      { template: `<b>{{name}}</b><img src=x onerror=alert(1)>` }
+      // allowHtml defaults to false
+    );
+    // Template skipped → falls through to the auto popup (no <img>, no <b>).
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('<b>');
+  });
+
+  it('honors `popup.template` when the host opts in, but escapes substituted values', () => {
+    const html = buildPopupContent(
+      feature({ name: '<script>evil</script>' }),
+      { template: '<b>{{name}}</b>' },
+      true
+    );
+    // The authored structural HTML stays; the data value is escaped.
+    expect(html).toContain('<b>');
+    expect(html).toContain('&lt;script&gt;');
+    expect(html).not.toContain('<script>');
+  });
+
+  it('auto-generated popup always escapes values (safe by construction)', () => {
+    const html = buildPopupContent(
+      feature({ title: XSS, count: 5 }),
+      { titleField: 'title', fields: ['count'] }
+      // default untrusted path
+    );
+    expect(html).not.toContain('<img');
+    expect(html).toContain('&lt;img');
+    // structural HTML authored by the renderer is present
+    expect(html).toContain('<strong>');
+  });
+
+  it('returns null when there is no popup config or no properties', () => {
+    expect(buildPopupContent({ properties: { a: 1 } }, undefined)).toBeNull();
+    expect(buildPopupContent({}, { titleField: 'a' })).toBeNull();
+  });
+});

package/src/components/MapRenderer.tsx

@@ -41,6 +41,25 @@ export interface MapRendererProps {
    * @see ExpandableWrapperProps.toolbarVariant
    */
   toolbarVariant?: 'hover' | 'always-visible';
+
+  /**
+   * Trust marker / popup content as raw HTML (v6.10.0, audit P1.2).
+   *
+   * Leaflet renders bound tooltip/popup strings as HTML, so `marker.tooltip`,
+   * `marker.popup` and a GeoJSON `popup.template` are XSS vectors when the
+   * payload is untrusted (the default for an LLM/connector-driven public
+   * package). **Default `false`** → those are escaped as plain text, and
+   * `popup.template` is ignored in favour of the safe auto-generated popup.
+   *
+   * This is a **host-level** trust decision, deliberately NOT a payload field
+   * (a malicious payload could just set its own flag). The
+   * `<UIResourceRenderer>` path never sets it, so payload-driven maps are
+   * always text-safe. A host rendering `<MapRenderer>` directly with trusted
+   * data may set `allowHtmlPopups` to restore rich HTML popups. The
+   * auto-generated popup (`titleField` / `fields`) is safe-by-construction
+   * and unaffected either way.
+   */
+  allowHtmlPopups?: boolean;
 }
 
 // ─── Helpers ────────────────────────────────────────────────
@@ -108,16 +127,27 @@ function buildStyleFn(
 
 /**
  * Build popup HTML from a feature's properties using popup config.
+ *
+ * `allowHtml` (audit P1.2) gates the raw-HTML `popup.template`: it is honored
+ * only when the host trusts the payload. On the default (untrusted) path the
+ * template is ignored and we fall through to the auto-generated popup, whose
+ * structure is renderer-authored and whose values are always escaped — safe
+ * by construction. Even in the trusted path, substituted `{{prop}}` values
+ * are escaped (they are data, not markup).
  */
-function buildPopupContent(feature: any, popup: MapPopupConfig | undefined): string | null {
+export function buildPopupContent(
+  feature: any,
+  popup: MapPopupConfig | undefined,
+  allowHtml = false
+): string | null {
   if (!popup || !feature?.properties) return null;
   const props = feature.properties;
 
-  // Custom template
-  if (popup.template) {
+  // Custom template — raw HTML, so trusted-host only.
+  if (allowHtml && popup.template) {
     return popup.template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
       const val = props[key];
-      return val != null ? String(val) : '';
+      return val != null ? escapeHtml(String(val)) : '';
     });
   }
 
@@ -150,6 +180,29 @@ function escapeHtml(str: string): string {
     .replace(/"/g, '&quot;');
 }
 
+/**
+ * Resolve a marker's tooltip/popup string for binding (audit P1.2). Leaflet
+ * renders bound strings as HTML; `marker.tooltip` / `marker.popup` come from
+ * the (untrusted) payload, so they are escaped to plain text unless the host
+ * has opted into raw HTML via `allowHtmlPopups`. Pure + exported for tests.
+ */
+export function popupSafeText(value: string | undefined, allowHtml = false): string | undefined {
+  if (value == null) return undefined;
+  return allowHtml ? value : escapeHtml(value);
+}
+
+/** Bind a marker's tooltip + popup, escaping by default (see popupSafeText). */
+export function bindMarkerContent(
+  m: any,
+  marker: { tooltip?: string; popup?: string },
+  allowHtml: boolean
+): void {
+  const tooltip = popupSafeText(marker.tooltip, allowHtml);
+  if (tooltip) m.bindTooltip(tooltip);
+  const popup = popupSafeText(marker.popup, allowHtml);
+  if (popup) m.bindPopup(popup);
+}
+
 /**
  * Add a GeoJSON layer to the map with style and popup support.
  * Returns the layer for bounds calculation.
@@ -223,8 +276,15 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
   let mapInstance: any = null;
   const [isLeafletLoaded, setIsLeafletLoaded] = createSignal(false);
   const [error, setError] = createSignal<string | null>(null);
+  // PMTiles is an optional overlay on top of the base map. When it fails we
+  // keep the base map but surface a visible notice (audit P1.3) instead of a
+  // silent console.warn that leaves the user with an unexplained empty layer.
+  const [pmtilesError, setPmtilesError] = createSignal<string | null>(null);
   const isExpanded = useExpanded();
   const telemetry = useTelemetry();
+  // Host-level trust for raw HTML in marker/popup content (audit P1.2).
+  // Default false → tooltip/popup escaped, GeoJSON `popup.template` ignored.
+  const allowHtml = () => props.allowHtmlPopups === true;
 
   const params = () => props.params || (props.component?.params as MapComponentParams);
 
@@ -334,8 +394,7 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
             });
             p?.markers?.forEach((marker) => {
               const m = L.marker(marker.position);
-              if (marker.tooltip) m.bindTooltip(marker.tooltip);
-              if (marker.popup) m.bindPopup(marker.popup);
+              bindMarkerContent(m, marker, allowHtml());
               clusterGroup.addLayer(m);
               markers.push(m);
             });
@@ -343,16 +402,14 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
           } catch {
             p?.markers?.forEach((marker) => {
               const m = L.marker(marker.position).addTo(mapInstance);
-              if (marker.tooltip) m.bindTooltip(marker.tooltip);
-              if (marker.popup) m.bindPopup(marker.popup);
+              bindMarkerContent(m, marker, allowHtml());
               markers.push(m);
             });
           }
         } else {
           p?.markers?.forEach((marker) => {
             const m = L.marker(marker.position).addTo(mapInstance);
-            if (marker.tooltip) m.bindTooltip(marker.tooltip);
-            if (marker.popup) m.bindPopup(marker.popup);
+            bindMarkerContent(m, marker, allowHtml());
             markers.push(m);
           });
         }
@@ -396,6 +453,7 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
         }
 
         // ─── PMTiles (v3.1.0) ────────────────────────
+        setPmtilesError(null);
         if (p?.pmtiles) {
           try {
             // @ts-ignore — optional peer dependency, may not be installed
@@ -439,7 +497,23 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
 
             pmLayer.addTo(mapInstance);
           } catch (e) {
-            console.warn('[MCP-UI] Failed to load protomaps-leaflet for PMTiles:', e);
+            // P1.3 — do NOT fail silently. Keep the base map, but surface a
+            // visible notice and report a renderer error via telemetry. The
+            // most common cause is the optional `protomaps-leaflet` peer not
+            // being installed.
+            const detail = e instanceof Error ? e.message : String(e);
+            const message =
+              'PMTiles layer unavailable — the optional "protomaps-leaflet" ' +
+              'peer dependency failed to load or render.';
+            console.warn('[MCP-UI] ' + message, e);
+            setPmtilesError(message);
+            telemetry?.dispatch({
+              type: 'render:error',
+              errorMessage: `${message} (${detail})`,
+              id: props.component?.id ?? '',
+              componentType: 'map',
+              ts: Date.now(),
+            });
           }
         }
 
@@ -501,6 +575,16 @@ export const MapRenderer: Component<MapRendererProps> = (props) => {
           </div>
         </Show>
         <Show when={!error()}>
+          {/* P1.3 — visible notice when the PMTiles overlay fails but the
+                        base map is still usable. */}
+          <Show when={pmtilesError()}>
+            <div
+              role="alert"
+              class="m-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-200"
+            >
+              {pmtilesError()} The base map is still shown.
+            </div>
+          </Show>
           <div
             ref={mapContainer}
             style={