chore: add TrustedHTML to sanitizer output to fix build errors for CSP

.github/workflows/main.yml

@@ -52,6 +52,9 @@ jobs:
       - name: Install Playwright Browsers (chromium)
         run: pnpm exec playwright install chromium
 
+      - name: Start HTTP Server
+        run: pnpm serve:demo &
+
       - name: Find Playwright Summary Comment (when exist)
         if: ${{ github.event.pull_request.number }}
         uses: peter-evans/find-comment@v2

demo/src/examples/example13.ts

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
@@ -17,6 +18,7 @@ export default class Example {
       name: 'my-select',
       single: false,
       useSelectOptionLabelToHtml: true,
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
       data: [
         {
           text: '<i class="fa fa-star"></i> January',

demo/src/options/options27.ts

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { multipleSelect, MultipleSelectInstance, TextFilter } from 'multiple-select-vanilla';
 
 export default class Example {
@@ -20,6 +21,7 @@ export default class Example {
         divElm.innerHTML = text;
         return divElm.textContent?.includes(search) ?? true;
       },
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
     }) as MultipleSelectInstance;
 
     this.ms2 = multipleSelect('#from-data', {
@@ -31,6 +33,7 @@ export default class Example {
         { value: `44'`, text: `44'` },
         { value: `33`, text: `<span style="font-weight:bold">33</span>` },
       ],
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }) as unknown as string,
     }) as MultipleSelectInstance;
 
     this.btnEnableElm = document.querySelector('#enableRenderHtml') as HTMLButtonElement;

demo/src/options/options28.ts

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
@@ -9,6 +10,7 @@ export default class Example {
       labelTemplate: (el) => {
         return `<i class="fa fa-star"></i>${el.getAttribute('label')}`;
       },
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
     }) as MultipleSelectInstance;
   }
 

demo/src/options/options30.ts

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
@@ -12,18 +13,21 @@ export default class Example {
       autoAdjustDropHeight: true,
       position: 'top',
       showOkButton: true,
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
     }) as MultipleSelectInstance;
 
     this.ms2 = multipleSelect('#select2', {
       autoAdjustDropHeight: true,
       position: 'top',
       showOkButton: true,
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
     }) as MultipleSelectInstance;
 
     this.ms3 = multipleSelect('#select3', {
       autoAdjustDropHeight: true,
       filter: true,
       position: 'top',
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }) as unknown as string,
     }) as MultipleSelectInstance;
 
     this.ms4 = multipleSelect('#select4') as MultipleSelectInstance;

demo/src/options/options31.ts

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
@@ -11,6 +12,7 @@ export default class Example {
 
     this.ms2 = multipleSelect('#select2', {
       useSelectOptionLabelToHtml: true,
+      sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
       data: [
         {
           text: '<i class="fa fa-star"></i> January',

demo/src/options/options32.ts

@@ -13,7 +13,7 @@ export default class Example {
           : dirtyHtml,
 
       // or even better, use dedicated libraries like DOM Purify: https://github.com/cure53/DOMPurify
-      // sanitizer: (dirtyHtml) => DOMPurify.sanitize(dirtyHtml || '')
+      // sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true }),
     }) as MultipleSelectInstance;
   }
 

lib/package.json

@@ -67,6 +67,7 @@
     "sass:copy": "cross-env copyfiles -u 2 src/styles/**/*.scss dist/styles/sass"
   },
   "devDependencies": {
+    "@types/trusted-types": "^2.0.5",
     "autoprefixer": "^10.4.16",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",

lib/src/MultipleSelectInstance.ts

@@ -972,7 +972,7 @@ export class MultipleSelectInstance {
    */
   protected renderAsTextOrHtmlWhenEnabled(elm: HTMLElement, value: string) {
     if (this.isRenderAsHtml) {
-      elm.innerHTML = this.options.sanitizer ? this.options.sanitizer(value) : value;
+      elm.innerHTML = (typeof this.options.sanitizer === 'function' ? this.options.sanitizer(value) : value) as unknown as string;
     } else {
       elm.textContent = value;
     }

lib/src/interfaces/interfaces.ts

@@ -27,7 +27,7 @@ export interface VirtualScrollOption {
   scrollEl: HTMLElement;
   contentEl: HTMLElement;
   callback: () => void;
-  sanitizer?: (dirtyHtml: string) => string;
+  sanitizer?: (html: string) => string | TrustedHTML;
 }
 
 export interface MultipleSelectLocale {

lib/src/interfaces/multipleSelectOption.interface.ts

@@ -255,5 +255,5 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
    * 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;
+  sanitizer?: (html: string) => string | TrustedHTML;
 }

package.json

@@ -43,7 +43,7 @@
     "new-publish": "lerna publish from-package",
     "preroll-new-release": "echo Please update getting-started lib version before pushing release. ⚠️",
     "roll-new-release": "pnpm build && pnpm new-version && pnpm new-publish",
-    "serve": "pnpm -r --stream --filter=\"{demo/**}\" dev",
+    "serve:demo": "pnpm -r --stream --filter=\"{demo/**}\" dev",
     "test:e2e": "playwright test --config playwright/playwright.config.ts",
     "test:e2e:debug": "playwright test --config playwright/playwright.config.ts --ui --debug",
     "test:e2e:ui": "playwright test --config playwright/playwright.config.ts --ui",

playwright/playwright.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
     timeout: 5000,
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
+  forbidOnly: Boolean(process.env.CI),
   use: {
     baseURL: 'http://localhost:3000/',
     headless: true,
@@ -26,10 +26,4 @@ export default defineConfig({
         // { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
       ]
     : [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
-  webServer: process.env.CI
-    ? {
-        command: 'pnpm serve',
-        port: 3000,
-      }
-    : undefined,
 });