fix(html): display strings with angle brackets in query results

.gitignore

@@ -126,3 +126,5 @@ docker/*local*
 test-report.html
 superset/static/stats/statistics.html
 .aider*
+
+.cursor/

superset-frontend/packages/superset-ui-core/src/utils/html.test.tsx

@@ -24,6 +24,7 @@ import {
   removeHTMLTags,
   isJsonString,
   getParagraphContents,
+  escapeHtml,
 } from './html';
 
 describe('sanitizeHtml', () => {
@@ -189,3 +190,49 @@ describe('getParagraphContents', () => {
     });
   });
 });
+
+describe('escapeHtml', () => {
+  test('should escape angle brackets', () => {
+    const input = '<div>test</div>';
+    const output = escapeHtml(input);
+    expect(output).toBe('&lt;div&gt;test&lt;/div&gt;');
+  });
+
+  test('should escape ampersand', () => {
+    const input = 'A & B';
+    const output = escapeHtml(input);
+    expect(output).toBe('A &amp; B');
+  });
+
+  test('should escape quotes', () => {
+    const input = 'Say "hello" and \'hi\'';
+    const output = escapeHtml(input);
+    expect(output).toBe('Say &quot;hello&quot; and &#39;hi&#39;');
+  });
+
+  test('should escape all HTML entities in complex string', () => {
+    const input = '<script>alert("XSS & more")</script>';
+    const output = escapeHtml(input);
+    expect(output).toBe(
+      '&lt;script&gt;alert(&quot;XSS &amp; more&quot;)&lt;/script&gt;',
+    );
+  });
+
+  test('should return plain text unchanged', () => {
+    const input = 'Just plain text';
+    const output = escapeHtml(input);
+    expect(output).toBe('Just plain text');
+  });
+
+  test('should handle strings with comparison operators', () => {
+    const input = 'a <= 10 and b > 10';
+    const output = escapeHtml(input);
+    expect(output).toBe('a &lt;= 10 and b &gt; 10');
+  });
+
+  test('should handle empty string', () => {
+    const input = '';
+    const output = escapeHtml(input);
+    expect(output).toBe('');
+  });
+});

superset-frontend/packages/superset-ui-core/src/utils/html.tsx

@@ -87,6 +87,24 @@ export function removeHTMLTags(str: string): string {
   return str.replace(/<[^>]*>/g, '');
 }
 
+/**
+ * Escapes HTML entities in a string to prevent it from being interpreted as HTML.
+ * This is useful for displaying strings containing angle brackets as plain text.
+ *
+ * @param str - The string to escape
+ * @returns The escaped string with HTML entities
+ */
+export function escapeHtml(str: string): string {
+  const escapeMap: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+  };
+  return str.replace(/[&<>"']/g, match => escapeMap[match]);
+}
+
 export function isJsonString(str: string): boolean {
   try {
     JSON.parse(str);

superset-frontend/src/components/FilterableTable/utils.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { JsonModal, safeJsonObjectParse } from 'src/components/JsonModal';
-import { t, safeHtmlSpan } from '@superset-ui/core';
+import { t, safeHtmlSpan, escapeHtml, isProbablyHTML } from '@superset-ui/core';
 import { NULL_STRING, CellDataType } from './useCellContentParser';
 
 type CellParams = {
@@ -51,7 +51,26 @@ export const renderResultCell = ({
       />
     );
   }
-  if (allowHTML && typeof cellData === 'string') {
+  if (typeof cellData === 'string') {
+    // For SQL Lab query results, always display strings as text (not as HTML)
+    // Escape HTML entities so strings like '<div>test</div>' display correctly
+    if (!allowHTML) {
+      // When HTML is not allowed, always escape entities
+      // Wrap in span and use dangerouslySetInnerHTML to ensure proper rendering
+      return (
+        <span dangerouslySetInnerHTML={{ __html: escapeHtml(cellNode) }} />
+      );
+    }
+    // When HTML is allowed, check if it looks like HTML
+    // If it does, escape it to display as text (SQL results should show actual values)
+    // If it doesn't, use safeHtmlSpan for potential HTML rendering
+    if (isProbablyHTML(cellNode)) {
+      // Escape HTML-like strings to display them as literal text
+      // Use dangerouslySetInnerHTML so the browser decodes the entities correctly
+      return (
+        <span dangerouslySetInnerHTML={{ __html: escapeHtml(cellNode) }} />
+      );
+    }
     return safeHtmlSpan(cellNode);
   }
   return cellNode;