feat: add sanitizer callback option to sanitize html code

Author: ghiscoding

demo/src/app-routing.ts

@@ -41,6 +41,7 @@ import Options28 from './options/options28';
 import Options29 from './options/options29';
 import Options30 from './options/options30';
 import Options31 from './options/options31';
+import Options32 from './options/options32';
 import Methods01 from './methods/methods01';
 import Methods02 from './methods/methods02';
 import Methods03 from './methods/methods03';
@@ -111,6 +112,7 @@ export const exampleRouting = [
       { name: 'options29', view: '/src/options/options29.html', viewModel: Options29, title: 'Auto-Adjust Drop Position' },
       { name: 'options30', view: '/src/options/options30.html', viewModel: Options30, title: 'Auto-Adjust Drop Height/Width' },
       { name: 'options31', view: '/src/options/options31.html', viewModel: Options31, title: 'Use Select Option as Label' },
+      { name: 'options32', view: '/src/options/options32.html', viewModel: Options32, title: 'Sanitizer' },
     ],
   },
   {

demo/src/options/options32.html

@@ -0,0 +1,47 @@
+<div class="row mb-2">
+  <div class="col-md-12 title-desc">
+    <h2 class="bd-title">
+      Sanitizer
+      <span class="float-end links">
+        Code <span class="fa fa-link"></span>
+        <span class="small">
+          <a
+            target="_blank"
+            href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.html"
+            >html</a
+          >
+          |
+          <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.ts"
+            >ts</a
+          >
+        </span>
+      </span>
+    </h2>
+    <div class="demo-subtitle">
+      Use <code>sanitizer</code> callback option to sanitize all html code and prevent cross-site scripting attack.
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="mb-3 row">
+    <label class="col-sm-3 text-end">Select placeholder with XSS</label>
+
+    <div class="col-sm-9">
+      <select id="select1" multiple="multiple" class="full-width">
+        <option value="1">January</option>
+        <option value="2">February</option>
+        <option value="3">March</option>
+        <option value="4">April</option>
+        <option value="5">May</option>
+        <option value="6">June</option>
+        <option value="7">July</option>
+        <option value="8">August</option>
+        <option value="9">September</option>
+        <option value="10">October</option>
+        <option value="11">November</option>
+        <option value="12">December</option>
+      </select>
+    </div>
+  </div>
+</div>

demo/src/options/options32.ts

@@ -0,0 +1,25 @@
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
+
+export default class Example {
+  ms1?: MultipleSelectInstance;
+
+  mount() {
+    this.ms1 = multipleSelect('#select1', {
+      placeholder: 'Placeholder with cross-site scripting code...<img src="not-found" onerror=alert("Hacked")>',
+      sanitizer: (dirtyHtml: string) =>
+        typeof dirtyHtml === 'string'
+          ? // prettier-ignore
+            decodeURIComponent(dirtyHtml).replace(/(\b)(on[a-z]+)(\s*)=|javascript:([^>]*)[^>]*|(<\s*)(\/*)script([<>]*).*(<\s*)(\/*)script(>*)|(&lt;)(\/*)(script|script defer)(.*)(&gt;|&gt;">)/gi, '')
+          : dirtyHtml,
+
+      // or even better, use dedicated libraries like DOM Purify: https://github.com/cure53/DOMPurify
+      // sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml || '')
+    }) as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms1 = undefined;
+  }
+}

lib/src/MultipleSelectInstance.ts

@@ -427,6 +427,7 @@ export class MultipleSelectInstance {
           rows,
           scrollEl: this.ulElm,
           contentEl: this.ulElm,
+          sanitizer: this.options.sanitizer,
           callback: () => {
             updateDataOffset();
             this.events();
@@ -442,7 +443,7 @@ export class MultipleSelectInstance {
       }
     } else {
       if (this.ulElm) {
-        this.ulElm.innerHTML = rows.join('');
+        this.ulElm.innerHTML = this.options.sanitizer ? this.options.sanitizer(rows.join('')) : rows.join('');
         this.updateDataStart = 0;
         this.updateDataEnd = this.updateData.length;
         this.virtualScroll = null;
@@ -894,8 +895,9 @@ export class MultipleSelectInstance {
 
     if (spanElm) {
       if (sl === 0) {
+        const placeholder = this.options.placeholder || '';
         spanElm.classList.add('ms-placeholder');
-        spanElm.innerHTML = this.options.placeholder || '';
+        spanElm.innerHTML = this.options.sanitizer ? this.options.sanitizer(placeholder) : placeholder;
       } else if (sl < this.options.minimumCountSelected) {
         html = getSelectOptionHtml();
       } else if (this.options.formatAllSelected() && sl === this.dataTotal) {
@@ -911,7 +913,7 @@ export class MultipleSelectInstance {
       if (html) {
         spanElm?.classList.remove('ms-placeholder');
         if (this.options.useSelectOptionLabelToHtml) {
-          spanElm.innerHTML = html;
+          spanElm.innerHTML = this.options.sanitizer ? this.options.sanitizer(html) : html;
         } else {
           spanElm.textContent = html;
         }

lib/src/interfaces/interfaces.ts

@@ -20,4 +20,5 @@ export interface VirtualScrollOption {
   scrollEl: HTMLElement;
   contentEl: HTMLElement;
   callback: () => void;
+  sanitizer?: (dirtyHtml: string) => string;
 }

lib/src/interfaces/multipleSelectOption.interface.ts

@@ -207,6 +207,12 @@ export interface MultipleSelectOption {
 
   /** Fires when a checkbox filter is changed. */
   onFilter: (text?: string) => void;
+
+  /**
+   * Sanitizes HTML code, for example `<script>`, to prevents XSS attacks.
+   * A library like DOM Purify could be used to sanitize html code, for example: `sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml || '')`
+   */
+  sanitizer?: (dirtyHtml: string) => string;
 }
 
 export interface MultipleSelectView {

lib/src/services/virtual-scroll.ts

@@ -17,6 +17,7 @@ export class VirtualScroll {
   scrollTop: number;
   destroy: () => void;
   callback: () => void;
+  sanitizer?: (dirtyHtml: string) => string;
 
   constructor(options: VirtualScrollOption) {
     this.rows = options.rows;
@@ -51,7 +52,7 @@ export class VirtualScroll {
     if (typeof this.clusterHeight === 'undefined') {
       this.cache.scrollTop = this.scrollEl.scrollTop;
       const data = rows[0] + rows[0] + rows[0];
-      this.contentEl.innerHTML = `${data}`;
+      this.contentEl.innerHTML = this.sanitizer ? this.sanitizer(`${data}`) : `${data}`;
       this.cache.data = data;
       this.getRowsHeight();
     }
@@ -71,7 +72,7 @@ export class VirtualScroll {
       if (data.bottomOffset) {
         html.push(this.getExtra('bottom', data.bottomOffset));
       }
-      this.contentEl.innerHTML = html.join('');
+      this.contentEl.innerHTML = this.sanitizer ? this.sanitizer(html.join('')) : html.join('');
     } else if (bottomOffsetChanged && this.contentEl.lastChild) {
       (this.contentEl.lastChild as HTMLElement).style.height = `${data.bottomOffset}px`;
     }