Skip to content

[tfjs-vis] Escape HTML in heatmap tooltip labels#8717

Open
f0r wants to merge 1 commit into
tensorflow:masterfrom
f0r:fix/tfjs-vis-heatmap-tooltip-escape
Open

[tfjs-vis] Escape HTML in heatmap tooltip labels#8717
f0r wants to merge 1 commit into
tensorflow:masterfrom
f0r:fix/tfjs-vis-heatmap-tooltip-escape

Conversation

@f0r
Copy link
Copy Markdown

@f0r f0r commented Jun 6, 2026

What

render.heatmap escapes HTML in tooltip tick labels so that label strings
are rendered as text rather than markup.

Why

When xTickLabels/yTickLabels are supplied, render.heatmap installs a
custom vega-tooltip sanitize function to strip an internal index suffix
escapeHTML, so the tick-label string is written into the tooltip element via
innerHTML without escaping. A label such as <img src=x onerror=...> is
therefore parsed as live HTML in the tooltip.

This restores the escaping vega-tooltip applies by default, while keeping the
existing index-suffix stripping.

Changes

  • Strip the index suffix, then HTML-escape the result in the tooltip sanitize.
  • Extract the escaping into an escapeHTML helper.
  • Add unit tests for escapeHTML.

I've signed the Google CLA.

When `xTickLabels`/`yTickLabels` are supplied, `render.heatmap` installs a
custom vega-tooltip `sanitize` function to strip an internal index suffix.
Supplying a custom `sanitize` bypasses vega-tooltip's default `escapeHTML`,
so tick-label strings were inserted into the tooltip as raw HTML instead of
text.

Re-apply HTML escaping after stripping the suffix so labels render as text,
matching vega-tooltip's default behavior. Extract the escaping into an
`escapeHTML` helper and add unit tests.
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.

1 participant