Preserve query plan tooltip text during rendering

.github/workflows/ci.yml

@@ -34,3 +34,6 @@ jobs:
 
       - name: Run lint
         run: yarn lint
+
+      - name: Run tests
+        run: yarn test

package.json

@@ -1,7 +1,7 @@
 {
   "name": "azdataGraph",
   "description": "azdataGraph is a derivative of mxGraph, which is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "homepage": "https://github.com/microsoft/azdataGraph",
   "author": "Microsoft",
   "license": "Apache-2.0",
@@ -19,7 +19,8 @@
     "build": "yarn compile-mxgraph && npx tsc && node build.js",
     "watch": "yarn compile-mxgraph && node build.js --watch",
     "examples": "http-server -p 4000",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "node --test test/*.test.js"
   },
   "devDependencies": {
     "@jgoz/esbuild-plugin-typecheck": "^4.0.2",

src/js/azdata/view/azDataGraph.js

@@ -87,6 +87,31 @@ azdataGraph.prototype.insertWeightedInvertedEdge = function (parent, id, value,
     return this.insertInvertedEdge(parent, id, value, source, target, `strokeWidth=${value.weight.toFixed(1)};` + style);
 };
 
+/**
+ * Function: escapeTooltipText
+ *
+ * Encodes text for safe insertion into tooltip HTML.
+ *
+ * Parameters:
+ * value - Value to encode.
+ */
+azdataGraph.prototype.escapeTooltipText = function (value) {
+    return String(value ?? '').replace(/[&<>"']/g, character => {
+        switch (character) {
+            case '&':
+                return '&amp;';
+            case '<':
+                return '&lt;';
+            case '>':
+                return '&gt;';
+            case '"':
+                return '&quot;';
+            case "'":
+                return '&#39;';
+        }
+    });
+};
+
 /**
  * Function: getStyledTooltipForCell
  * 
@@ -113,10 +138,10 @@ azdataGraph.prototype.getStyledTooltipForCell = function (cell) {
 
         // tooltip heading for vertices only
         if (!cell.edge) {
-            let tooltipTitle = this.truncateTooltipTitle(cell.value.tooltipTitle);
+            let tooltipTitle = this.escapeTooltipText(this.truncateTooltipTitle(cell.value.tooltipTitle));
             tooltip += `<div style=\"${centerText}\"><span style=\"${boldText}\">${tooltipTitle}</span></div>`;
             if (cell.value.description) {
-                tooltip += `<div style=\"${headerBottomMargin} ${headerTopMargin}\"><span>${cell.value.description}</span></div>`;
+                tooltip += `<div style=\"${headerBottomMargin} ${headerTopMargin}\"><span>${this.escapeTooltipText(cell.value.description)}</span></div>`;
             }
         }
 
@@ -129,8 +154,8 @@ azdataGraph.prototype.getStyledTooltipForCell = function (cell) {
             tooltip += `<div style=\"${tooltipLineHeight}\">`;
 
             tooltip += `<div style=\"${justifyContent}\">`;
-            tooltip += `<span style=\"${boldText} ${metricLabelMargin}\">${cell.value.metrics[i].name}</span>`;
-            tooltip += `<span>${cell.value.metrics[i].value}</span>`;
+            tooltip += `<span style=\"${boldText} ${metricLabelMargin}\">${this.escapeTooltipText(cell.value.metrics[i].name)}</span>`;
+            tooltip += `<span>${this.escapeTooltipText(cell.value.metrics[i].value)}</span>`;
             tooltip += '</div>';
 
             if (i < cell.value.metrics.length - 1) {
@@ -144,13 +169,13 @@ azdataGraph.prototype.getStyledTooltipForCell = function (cell) {
         if (!cell.edge) {
             cell.value.metrics.filter(m => m.isLongString).forEach(m => {
                 tooltip += '<hr />';
-                tooltip += `<div style=\"${footerTopMargin}\"><span style=\"${boldText}\">${m.name}</span></div>`;
+                tooltip += `<div style=\"${footerTopMargin}\"><span style=\"${boldText}\">${this.escapeTooltipText(m.name)}</span></div>`;
 
                 let metricLabel = m.value.replace(/(\r\n|\n|\r)/gm, " ");
                 if (metricLabel.length > 103) {
                     metricLabel = metricLabel.substring(0, 100) + '...';
                 }
-                tooltip += `<div><span>${metricLabel}</span></div>`; // Removing all line breaks as they look bad in tooltips
+                tooltip += `<div><span>${this.escapeTooltipText(metricLabel)}</span></div>`; // Removing all line breaks as they look bad in tooltips
             })
         }
 

test/tooltipRendering.test.js

@@ -0,0 +1,72 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+function loadAzdataGraph() {
+    function mxGraph() {}
+    mxGraph.prototype.getTooltipForCell = function () {
+        return '';
+    };
+
+    const context = vm.createContext({ mxGraph });
+    const source = fs.readFileSync(
+        path.join(__dirname, '..', 'src', 'js', 'azdata', 'view', 'azDataGraph.js'),
+        'utf8'
+    );
+    vm.runInContext(source, context);
+    return context.azdataGraph;
+}
+
+test('escapeTooltipText encodes HTML-significant characters', () => {
+    const AzdataGraph = loadAzdataGraph();
+    const graph = Object.create(AzdataGraph.prototype);
+
+    assert.equal(
+        graph.escapeTooltipText(`&<>"'`),
+        '&amp;&lt;&gt;&quot;&#39;'
+    );
+});
+
+test('styled tooltips encode all dynamic text fields', () => {
+    const AzdataGraph = loadAzdataGraph();
+    const graph = Object.create(AzdataGraph.prototype);
+    const tooltip = graph.getStyledTooltipForCell({
+        edge: false,
+        value: {
+            tooltipTitle: '<b>Title & text</b>',
+            description: '<img src=x onerror=alert(1)>',
+            metrics: [
+                {
+                    name: 'Footer',
+                    value: '',
+                    isLongString: false,
+                },
+                {
+                    name: '<Metric & name>',
+                    value: `"</span><svg onload=alert(1)>'`,
+                    isLongString: false,
+                },
+                {
+                    name: '<Long metric>',
+                    value: 'first line\n<script>alert(1)</script>',
+                    isLongString: true,
+                },
+            ],
+        },
+    });
+
+    assert.match(tooltip, /&lt;b&gt;Title &amp; text&lt;\/b&gt;/);
+    assert.match(tooltip, /&lt;img src=x onerror=alert\(1\)&gt;/);
+    assert.match(tooltip, /&lt;Metric &amp; name&gt;/);
+    assert.match(tooltip, /&quot;&lt;\/span&gt;&lt;svg onload=alert\(1\)&gt;&#39;/);
+    assert.match(tooltip, /&lt;Long metric&gt;/);
+    assert.match(tooltip, /first line &lt;script&gt;alert\(1\)&lt;\/script&gt;/);
+    assert.doesNotMatch(tooltip, /<img|<svg|<script/);
+});