chore(ui): prevent script execution in Toolbox UI rendering (googleapis#2331)

# Defensive Security Hardening: Prevent Script Execution in Toolbox UI
Rendering

> **Note:** This issue was identified during security research and
reviewed previously.
> While typical deployments operate within a trusted configuration
model, addressing this behavior was recommended as a defense-in-depth
improvement. This PR describes the implemented fix.

## Overview

This change improves the safety of the GenAI Toolbox UI by preventing
unintended JavaScript execution when rendering values derived from tool
configuration files.

Previously, certain fields from tool definitions were rendered directly
into HTML contexts without escaping. As a result, tool definitions
containing embedded HTML or script payloads could trigger JavaScript
execution when viewed in the dashboard. While this occurs within the
same trust boundary as the configuration owner, escaping these values by
default avoids unexpected execution and improves robustness.

## Changes Implemented

### 1. New Utility
- Added `sanitize.js` which exports a strict `escapeHtml()` function.
- Escapes dangerous characters: `&`, `<`, `>`, `"`, `'`, `/`, `` ` ``.
- Performs strict type checking, rendering `null` and `undefined` values
as empty strings.

### 2. Input Handling
- Updated `internal/server/static/js/toolDisplay.js` to wrap `tool.name`
and `tool.description` with `escapeHtml()` prior to rendering them into
the DOM.

### 3. Error Handling
- Updated `internal/server/static/js/loadTools.js` to sanitize error
messages that may reflect user-controlled or derived input before
rendering.

## Validation

- Verified behavior using tool definition files containing common script
execution vectors.
- Confirmed that embedded HTML and script payloads are rendered as
literal text.
- Verified that standard and existing tool definitions continue to
render correctly without functional regression.

## Notes

This change is a defense-in-depth hardening measure.  
It does not modify the existing trust model or intended usage patterns,
but ensures safer default rendering behavior and avoids unintended
script execution in the UI.

## Attribution

**Contributor:** Mohammed Tanveer (threatpointer)

---------

Co-authored-by: threatpointer <mohammed.tanveer1@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Yuan Teoh <45984206+Yuan325@users.noreply.github.com>

Author: 4 people

internal/server/static/js/auth.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { escapeHtml } from './sanitize.js';
+
 /**
  * Renders the Google Sign-In button using the GIS library.
  * @param {string} toolId The ID of the tool.
@@ -112,13 +114,14 @@ function handleCredentialResponse(response, toolId, authProfileName) {
 
 // creates the Google Auth method dropdown
 export function createGoogleAuthMethodItem(toolId, authProfileName) { 
+    const safeProfileName = escapeHtml(authProfileName);
     const UNIQUE_ID_BASE = `${toolId}-${authProfileName}`;
     const item = document.createElement('div');
 
     item.className = 'auth-method-item';
     item.innerHTML = `
         <div class="auth-method-header">
-            <span class="auth-method-label">Google ID Token (${authProfileName})</span>
+            <span class="auth-method-label">Google ID Token (${safeProfileName})</span>
             <button class="toggle-details-tab">Auto Setup</button>
         </div>
         <div class="auth-method-details" id="google-auth-details-${UNIQUE_ID_BASE}" style="display: none;">

internal/server/static/js/loadTools.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { renderToolInterface } from "./toolDisplay.js";
+import { escapeHtml } from "./sanitize.js";
 
 let toolDetailsAbortController = null;
 
@@ -34,7 +35,7 @@ export async function loadTools(secondNavContent, toolDisplayArea, toolsetName)
         renderToolList(apiResponse, secondNavContent, toolDisplayArea);
     } catch (error) {
         console.error('Failed to load tools:', error);
-        secondNavContent.innerHTML = `<p class="error">Failed to load tools: <pre><code>${error}</code></pre></p>`;
+        secondNavContent.innerHTML = `<p class="error">Failed to load tools: <pre><code>${escapeHtml(String(error))}</code></pre></p>`;
     }
 }
 
@@ -168,7 +169,7 @@ async function fetchToolDetails(toolName, toolDisplayArea) {
             console.debug("Previous fetch was aborted, expected behavior.");
         } else {
             console.error(`Failed to load details for tool "${toolName}":`, error);
-            toolDisplayArea.innerHTML = `<p class="error">Failed to load details for ${toolName}. ${error.message}</p>`;
+            toolDisplayArea.innerHTML = `<p class="error">Failed to load details for ${escapeHtml(toolName)}. ${escapeHtml(error.message)}</p>`;
         }
     }
 }

internal/server/static/js/sanitize.js

@@ -0,0 +1,43 @@
+// Copyright 2025 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * Escapes special characters for safe rendering in HTML text contexts.
+ *
+ * This utility encodes user-controlled values to avoid unintended script
+ * execution when rendering content as HTML. It is intended as a defensive
+ * measure and does not perform HTML sanitization.
+ *
+ * @param {*} input The value to escape.
+ * @return {string} The escaped string safe for HTML rendering.
+ */
+const htmlEscapes = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    '`': '&#x60;'
+};
+
+const escapeCharsRegex = /[&<>"'`]/g;
+
+export function escapeHtml(input) {
+    if (input === null || input === undefined) {
+        return '';
+    }
+
+    const str = String(input);
+    return str.replace(escapeCharsRegex, (char) => htmlEscapes[char]);
+}

internal/server/static/js/toolDisplay.js

@@ -14,6 +14,7 @@
 
 import { handleRunTool, displayResults } from './runTool.js';
 import { createGoogleAuthMethodItem } from './auth.js'
+import { escapeHtml } from './sanitize.js'
 
 /**
  * Helper function to create form inputs for parameters.
@@ -357,9 +358,9 @@ export function renderToolInterface(tool, containerElement) {
     const descBox = document.createElement('div');
 
     nameBox.className = 'tool-box tool-name';
-    nameBox.innerHTML = `<h5>Name:</h5><p>${tool.name}</p>`;
+    nameBox.innerHTML = `<h5>Name:</h5><p>${escapeHtml(tool.name)}</p>`;
     descBox.className = 'tool-box tool-description';
-    descBox.innerHTML = `<h5>Description:</h5><p>${tool.description}</p>`;
+    descBox.innerHTML = `<h5>Description:</h5><p>${escapeHtml(tool.description)}</p>`;
 
     toolInfoContainer.className = 'tool-info';
     toolInfoContainer.appendChild(nameBox);