DOM-based XSS via unsafe configuration values passed into Flatpickr options

• Summary: Flatpickr allows application developers to pass configuration values (such as nextArrow) directly into DOM-rendered UI elements. If these values originate from untrusted sources (API, JSON config, or user-controlled backend data), they may be interpreted as HTML and executed in the browser, leading to DOM-based Cross-Site Scripting (XSS).

• Description:

  • Applications integrating Flatpickr may dynamically load configuration from backend services or JSON files and directly inject values into Flatpickr options without validation or sanitization. If a malicious actor controls these values, they can inject HTML payloads that are rendered in the DOM.

Steps to Reproduce (example scenario)

1. Backend returns configuration: json: { "nextArrow": "" }
2. Frontend passes it directly into Flatpickr: component.ts File: flatpickr(input, { nextArrow: config.nextArrow });
3. Flatpickr renders the value in the DOM.
4. Payload executes in browser context.

• Impact If exploited in real-world applications using Flatpickr:

• DOM-based XSS

  • Arbitrary JavaScript execution
  • Session/token theft (if accessible)
  • UI manipulation / phishing injection
  • Full compromise of SPA client context

• Root Cause

  • Flatpickr accepts raw HTML-like configuration values
  • No sanitization or encoding is enforced by default
  • Developers may unknowingly pass untrusted data into configuration fields

• Recommendation (for maintainers)

  • Document risk clearly Warn users that configuration fields may be rendered as HTML in DOM context.
  • Encourage safe defaults

• Recommend:

  • plain text values
  • icon systems instead of HTML strings
  • Consider sanitization layer (optional) Optionally provide safe rendering mode or escaping helper.