git commit -m "fix: prevent XSS in labels; add safe/HTML APIs and option

Author: Stukova

src/css-label.ts

@@ -23,29 +23,61 @@ export class CssLabel {
   private _customOpacity: number | undefined = undefined
   private _shouldBeShown = false
   private _text: string | number = ''
+  /**
+   * Tracks whether content was set via `dangerouslySetHtml` (`true`) or `setText` (`false`).
+   * Needed so that switching mode with the same string (e.g. `setText` then `dangerouslySetHtml`) still updates the DOM.
+   */
+  private _contentIsHtml = false
   private _customPadding: Padding | undefined = undefined
 
   private _customPointerEvents: Options['pointerEvents'] | undefined
   private _customStyle: string | undefined
   private _customClassName: string | undefined
 
-  public constructor (container: HTMLDivElement, text?: string | number, dontInjectStyles?: boolean) {
+  /**
+   * @param container - The parent element for the label.
+   * @param text - Initial label content (plain text or, if dangerousHtml is true, HTML).
+   * @param dontInjectStyles - When true, global styles are not injected.
+   * @param dangerousHtml - When true, text is set via innerHTML (XSS risk). Only use with trusted/sanitized content.
+   */
+  public constructor (container: HTMLDivElement, text?: string | number, dontInjectStyles?: boolean, dangerousHtml?: boolean) {
     if (!dontInjectStyles && !globalCssLabelStyles) globalCssLabelStyles = injectStyles(cssLabelStyles)
     this._container = container
     this._updateClasses()
-    if (text !== undefined) this.setText(text)
+    if (text !== undefined) {
+      if (dangerousHtml) {
+        this.dangerouslySetHtml(text)
+      } else {
+        this.setText(text)
+      }
+    }
     this.resetFontSize()
     this.resetPadding()
   }
 
   /**
-   * Sets the text of the element.
+   * Sets the text of the element using textContent (safe from XSS).
    * @param text - The text to set.
    */
   public setText (text: string | number): void {
-    if (this._text !== text) {
+    if (this._text !== text || this._contentIsHtml) {
       this._text = text
-      this.element.innerHTML = typeof text === 'number' ? String(text) : text
+      this._contentIsHtml = false
+      this.element.textContent = typeof text === 'number' ? String(text) : text
+      this._needsMeasureUpdate = true
+    }
+  }
+
+  /**
+   * Sets the inner HTML of the element. Only use with trusted or sanitized content.
+   * WARNING: XSS risk — do not pass user-provided or unsanitized HTML.
+   * @param html - The HTML to set (string or number; numbers are converted to string).
+   */
+  public dangerouslySetHtml (html: string | number): void {
+    if (this._text !== html || !this._contentIsHtml) {
+      this._text = html
+      this._contentIsHtml = true
+      this.element.innerHTML = typeof html === 'number' ? String(html) : html
       this._needsMeasureUpdate = true
     }
   }

src/index.ts

@@ -14,6 +14,7 @@ export class LabelRenderer {
   private _dontInjectStyles: boolean | undefined
   private _padding: Padding | undefined
   private _fontSize: number | undefined
+  private _dangerousHtml = false
 
   public constructor (container: HTMLDivElement, options?: Options) {
     if (!options?.dontInjectStyles && !globalCssLabelRendererStyles) globalCssLabelRendererStyles = injectStyles(cssLabelContainerStyles)
@@ -26,6 +27,7 @@ export class LabelRenderer {
     if (options?.dontInjectStyles) this._dontInjectStyles = options.dontInjectStyles
     if (options?.padding) this._padding = options.padding
     if (options?.fontSize) this._fontSize = options.fontSize
+    if (options?.dangerousHtml) this._dangerousHtml = options.dangerousHtml
 
     if (options?.dispatchWheelEventElement) {
       this._dispatchWheelEventElement = options.dispatchWheelEventElement
@@ -42,13 +44,17 @@ export class LabelRenderer {
       if (exists) {
         labelsToDelete.delete(label.id)
       } else {
-        const cssLabel = new CssLabel(this._container, label.text, this._dontInjectStyles)
+        const cssLabel = new CssLabel(this._container, label.text, this._dontInjectStyles, this._dangerousHtml)
         this._cssLabels.set(label.id, cssLabel)
         this._elementToData.set(cssLabel.element, label)
       }
       const labelToUpdate = this._cssLabels.get(label.id)
       if (labelToUpdate) {
-        labelToUpdate.setText(text)
+        if (this._dangerousHtml) {
+          labelToUpdate.dangerouslySetHtml(text)
+        } else {
+          labelToUpdate.setText(text)
+        }
         labelToUpdate.setPosition(x, y)
         if (style !== undefined) labelToUpdate.setStyle(style)
         if (weight !== undefined) labelToUpdate.setWeight(weight)

src/stories/quick-start/html-multiline-labels.ts

@@ -6,6 +6,7 @@ export function playHtmlMultilineLabels (div: HTMLDivElement): void {
   const renderer = new LabelRenderer(div, {
     fontSize: 12,
     padding: labelPadding,
+    dangerousHtml: true,
   })
   // Container is 200×400; all labels at x = 100, y = 60, 120, 180, 240, 300, 360
   renderer.setLabels([

src/types.ts

@@ -29,4 +29,8 @@ export interface Options {
   dontInjectStyles?: boolean;
   padding?: Padding;
   fontSize?: number;
+  /** When `true`, label text is set via `innerHTML` (`dangerouslySetHtml`).
+   * Only enable with trusted/sanitized content — XSS risk.
+   */
+  dangerousHtml?: boolean;
 }