🔒 [security fix] Replace innerHTML with textContent to mitigate XSS risk (#3651)

🎯 **What:** The vulnerability fixed is a potential Cross-Site Scripting
(XSS) issue in the `calcRects` function of
`packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/calc-positioning.ts`.

⚠️ **Risk:** The use of `innerHTML` when setting the content of a
measurement span could allow an attacker to inject and execute malicious
scripts if the input strings (like service or operation names) are not
properly sanitized or originate from an untrusted source.

🛡️ **Solution:** The fix replaces `innerHTML` with `textContent`. Since
the code is only intended to measure the visual dimensions of plain text
strings, `textContent` provides a secure alternative that prevents the
browser from parsing the input as HTML, thus eliminating the XSS vector.
A security-focused unit test has also been added to verify this
behavior.

---
*PR created automatically by Jules for task
[10016137243870737156](https://jules.google.com/task/10016137243870737156)
started by @jkowall*

---------

Signed-off-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>
Signed-off-by: Jonah Kowall <jkowall@kowall.net>
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: jkowall <1859948+jkowall@users.noreply.github.com>
Co-authored-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 4 people

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/calc-positioning.test.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import calcPositioning, { _initSvcSpan, _initOpSpan } from './calc-positioning';
-import { FONT_SIZE, LINE_HEIGHT, OP_PADDING_TOP } from './constants';
+import { FONT_SIZE, LINE_HEIGHT, OP_PADDING_TOP, WORD_RX } from './constants';
 
 describe('initializing measuring spans', () => {
   afterEach(() => {
@@ -227,4 +227,32 @@ describe('calcPositioning', () => {
       expect(measureOp).not.toHaveBeenCalled();
     });
   });
+
+  describe('security', () => {
+    it('treats input strings containing HTML tags as plain text', () => {
+      const svcSpan = _initSvcSpan();
+      const xssString = '<img src=x onerror=alert(1)>';
+      const wordCount = xssString.match(WORD_RX)?.length || 1;
+      const capturedHtml = [];
+      const originalImplementation = measureSvc.getMockImplementation();
+      svcMeasurements = genWidths(new Array(wordCount).fill(1));
+
+      measureSvc.mockImplementation(() => {
+        capturedHtml.push(svcSpan.innerHTML);
+        return originalImplementation();
+      });
+
+      try {
+        calcPositioning(xssString);
+      } finally {
+        measureSvc.mockImplementation(originalImplementation);
+      }
+
+      expect(capturedHtml).toHaveLength(wordCount);
+      capturedHtml.forEach(html => {
+        expect(html).not.toContain('<img');
+      });
+      expect(capturedHtml.some(html => html.includes('&lt;img'))).toBe(true);
+    });
+  });
 });

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/calc-positioning.ts

@@ -139,9 +139,9 @@ function calcWidth(lengths: number[], lines: number, longestThusFar = 0): number
  */
 const calcRects = _memoize(
   function calcRects(str: string | string[], span: HTMLSpanElement): TRect[] {
-    const lengths = (Array.isArray(str) ? [`${str.length} Operations}`] : str.match(WORD_RX) || [str]).map(
+    const lengths = (Array.isArray(str) ? [`${str.length} Operations`] : str.match(WORD_RX) || [str]).map(
       s => {
-        span.innerHTML = s;
+        span.textContent = s;
         return span.getClientRects()[0].width;
       }
     );