feat(RangeSlider): add sanitizer for tooltip content

Author: mrholek

docs/content/forms/range-slider.md

@@ -194,10 +194,14 @@ const rangeSlider = new RangeSlider(rangeSliderElement, {
 {{< partial "js-data-attributes.md" >}}
 {{< /markdown >}}
 
+{{< callout warning >}}
+Please note that for security reasons, the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied via data attributes.
+{{< /callout >}}
 
 {{< bs-table >}}
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| `allowList` | object | [Default value](/getting-started/javascript#sanitizer) |  Defines the set of permitted HTML tags and attributes that can safely appear in the tooltip content when HTML content is passedd. This helps maintain control over the output and prevent injection of malicious code. |
 | `clickableLabels` | boolean | `true` | Enables or disables the ability to click on labels to set slider values. |
 | `disabled` | boolean | `false` | Disables the slider, making it non-interactive and grayed out. |
 | `distance` | number | `0` | Sets the minimum distance between multiple slider handles. |
@@ -211,6 +215,8 @@ const rangeSlider = new RangeSlider(rangeSliderElement, {
 | `track` | boolean, 'fill' | `'fill'` | Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track. |
 | `value` | array, number | `0` | Sets the initial value(s) of the slider. |
 | `vertical` | boolean | `false` | Rotates the slider to a vertical orientation. |
+| `sanitize` | boolean | `true` | Controls whether HTML content in the tooltip should be sanitized before rendering. Strongly recommended to leave enabled unless you’re fully managing the content and trust its source. |
+| `sanitizeFn` | null, function | `null` | You can define your own custom sanitization logic by passing a function here. Ideal if you want to use a specialized HTML sanitizer or integrate with existing security tool. |
 {{< /bs-table >}}
 
 

js/src/range-slider.js

@@ -10,6 +10,7 @@ import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
 import SelectorEngine from './dom/selector-engine.js'
 import { defineJQueryPlugin, isRTL } from './util/index.js'
+import { DefaultAllowlist, sanitizeHtml } from './util/sanitizer.js'
 
 /**
  * Constants
@@ -19,6 +20,7 @@ const NAME = 'range-slider'
 const DATA_KEY = 'coreui.range-slider'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
+const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
 
 const EVENT_CHANGE = `change${EVENT_KEY}`
 const EVENT_INPUT = `input${EVENT_KEY}`
@@ -48,13 +50,16 @@ const SELECTOR_RANGE_SLIDER_LABEL = '.range-slider-label'
 const SELECTOR_RANGE_SLIDER_LABELS_CONTAINER = '.range-slider-labels-container'
 
 const Default = {
+  allowList: DefaultAllowlist,
   clickableLabels: true,
   disabled: false,
   distance: 0,
   labels: false,
   max: 100,
   min: 0,
   name: null,
+  sanitize: true,
+  sanitizeFn: null,
   step: 1,
   tooltips: true,
   tooltipsFormat: null,
@@ -64,13 +69,16 @@ const Default = {
 }
 
 const DefaultType = {
+  allowList: 'object',
   clickableLabels: 'boolean',
   disabled: 'boolean',
   distance: 'number',
   labels: '(array|boolean|string)',
   max: 'number',
   min: 'number',
   name: '(array|string|null)',
+  sanitize: 'boolean',
+  sanitizeFn: '(null|function)',
   step: '(number|string)',
   tooltips: 'boolean',
   tooltipsFormat: '(function|null)',
@@ -339,7 +347,9 @@ class RangeSlider extends BaseComponent {
       const tooltipInnerElement = this._createElement('div', CLASS_NAME_RANGE_SLIDER_TOOLTIP_INNER)
       const tooltipArrowElement = this._createElement('div', CLASS_NAME_RANGE_SLIDER_TOOLTIP_ARROW)
 
-      tooltipInnerElement.innerHTML = this._config.tooltipsFormat ? this._config.tooltipsFormat(input.value) : input.value
+      tooltipInnerElement.innerHTML = this._config.tooltipsFormat ?
+        (this._config.sanitize ? sanitizeHtml(this._config.tooltipsFormat(input.value), this._config.allowList, this._config.sanitizeFn) : this._config.tooltipsFormat(input.value)) :
+        input.value
       tooltipElement.append(tooltipInnerElement, tooltipArrowElement)
 
       input.parentNode.insertBefore(tooltipElement, input.nextSibling)
@@ -592,6 +602,12 @@ class RangeSlider extends BaseComponent {
   _getConfig(config) {
     const dataAttributes = Manipulator.getDataAttributes(this._element)
 
+    for (const dataAttribute of Object.keys(dataAttributes)) {
+      if (DISALLOWED_ATTRIBUTES.has(dataAttribute)) {
+        delete dataAttributes[dataAttribute]
+      }
+    }
+
     config = {
       ...dataAttributes,
       ...(typeof config === 'object' && config ? config : {})