Skip to content

Conversation

@dganesh05
Copy link

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

  • Implemented escapeHtml function to escape HTML entities in strings.
  • Added unit tests for escapeHtml to ensure correct functionality.
  • Updated FilterableTable to use escapeHtml for rendering string data safely.
  • Modified .gitignore to include .cursor/ files.
  • Updated package-lock.json to add peerDependencies for eslint-plugin-icons.

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

SUMMARY

Fixes a bug where SQL Lab query results containing strings with angle brackets (like <div>test</div>) were not displaying correctly. The issue occurred because HTML sanitization logic was incorrectly treating these strings as HTML and attempting to render them, which resulted in empty or missing cells.

Root Cause:
When renderResultCell detected HTML-like strings via isProbablyHTML(), it passed them to safeHtmlSpan() which sanitized and attempted to render them as HTML using dangerouslySetInnerHTML. For SQL query results, these should be displayed as literal text values, not rendered as HTML.

Solution:

  1. Added escapeHtml() utility function to properly escape HTML entities (<, >, &, ", ') for safe text display
  2. Updated renderResultCell() to escape HTML-like strings when displaying SQL query results, ensuring they appear as literal text with visible angle brackets
  3. Added comprehensive unit tests for the new escapeHtml() function

Technical Changes:

  • New function: escapeHtml() in superset-frontend/packages/superset-ui-core/src/utils/html.tsx

    • Escapes HTML entities to prevent strings from being interpreted as HTML
    • Returns escaped string (e.g., <div>test</div>&lt;div&gt;test&lt;/div&gt;)
  • Updated: renderResultCell() in superset-frontend/src/components/FilterableTable/utils.tsx

    • When allowHTML=false: Always escapes HTML entities
    • When allowHTML=true and string looks like HTML: Escapes it to display as literal text (for SQL results)
    • Uses dangerouslySetInnerHTML with escaped content so browser correctly decodes entities for display

Security:
The fix maintains security by escaping HTML entities, preventing XSS attacks while displaying all data correctly. Strings are displayed as text, not rendered as HTML.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

  • Strings with angle brackets appeared as empty cells or missing data
  • Example: SELECT '<div>test</div>' as html_string showed empty cell
Screenshot 2025-11-02 141808

After:

  • Strings with angle brackets display correctly with visible characters
  • Example: SELECT '<div>test</div>' as html_string shows <div>test</div> with visible angle brackets
Screenshot 2025-11-02 142051

TESTING INSTRUCTIONS

  1. Open SQL Lab in Superset
  2. Execute a query with strings containing angle brackets:
    SELECT '<div>test</div>' as html_string, 
           '<script>alert("xss")</script>' as script_string,
           'a < b and c > d' as comparison_string
  3. Verify the results grid displays all values correctly:
    • html_string should show: <div>test</div> (with visible angle brackets)
    • script_string should show: <script>alert("xss")</script> (escaped and visible)
    • comparison_string should show: a < b and c > d (with visible angle brackets)
  4. Test with various HTML-like strings to ensure they all display as text:
    • Tags: <div>, <span>, <p>, etc.
    • Comparison operators: a <= 10 and b > 20
    • XML/HTML snippets
  5. Verify security: Confirm that actual HTML injection attempts are still properly escaped and don't execute

Automated Tests:

  • Unit tests for escapeHtml() function (7 test cases covering various scenarios)
  • Tests verify correct escaping of <, >, &, ", ' characters
  • Tests verify plain text strings remain unchanged

ADDITIONAL INFORMATION

…ate tests

- Implemented escapeHtml function to escape HTML entities in strings.
- Added unit tests for escapeHtml to ensure correct functionality.
- Updated FilterableTable to use escapeHtml for rendering string data safely.
- Modified .gitignore to include .cursor/ files.
- Updated package-lock.json to add peerDependencies for eslint-plugin-icons.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue #1 - [BUG] Table Chart pagination layout broken

1 participant