diff --git a/demo/index.html b/demo/index.html
index a947056ac..8e94453c7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,6 +4,7 @@
+
Multiple-Select-Vanilla demo with Vite + TS
diff --git a/demo/package.json b/demo/package.json
index 3ed9085a7..931c05088 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -21,9 +21,11 @@
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.2",
+ "dompurify": "^3.0.6",
"font-awesome": "^4.7.0"
},
"devDependencies": {
+ "@types/dompurify": "^3.0.4",
"multiple-select-vanilla": "workspace:*",
"sass": "^1.69.5",
"typescript": "^5.2.2",
diff --git a/demo/src/main.ts b/demo/src/main.ts
index f72162029..e7c16e8f9 100644
--- a/demo/src/main.ts
+++ b/demo/src/main.ts
@@ -1,6 +1,7 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import 'font-awesome/css/font-awesome.css';
+import DOMPurify from 'dompurify';
import { createDomElement, emptyElement } from 'multiple-select-vanilla';
import { exampleRouting, navbarRouting } from './app-routing';
@@ -32,7 +33,9 @@ class Main {
async init() {
const location = window.location;
- document.querySelector('#app')!.innerHTML = mainHtml;
+ document.querySelector('#app')!.innerHTML = DOMPurify.sanitize(mainHtml, {
+ RETURN_TRUSTED_TYPE: true,
+ }) as unknown as string;
let route = location.hash.replace(this.stateBangChar, '');
if (!route || route === '/' || route === '#') {
@@ -121,7 +124,9 @@ class Main {
if (foundRouter) {
this.currentRouter = foundRouter;
// const html = await import(/*@vite-ignore*/ `${foundRouter.view}?raw`).default;
- document.querySelector('.panel-wm-content')!.innerHTML = pageLayoutGlobs[foundRouter.view];
+ document.querySelector('.panel-wm-content')!.innerHTML = DOMPurify.sanitize(pageLayoutGlobs[foundRouter.view], {
+ RETURN_TRUSTED_TYPE: true,
+ }) as unknown as string;
const vm = new foundRouter.viewModel() as ViewModel;
this.currentModel = vm;
(window as any)[foundRouter.name] = vm.mount?.();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 13502a959..53c9badfe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,10 +74,16 @@ importers:
bootstrap:
specifier: ^5.3.2
version: 5.3.2(@popperjs/core@2.11.8)
+ dompurify:
+ specifier: ^3.0.6
+ version: 3.0.6
font-awesome:
specifier: ^4.7.0
version: 4.7.0
devDependencies:
+ '@types/dompurify':
+ specifier: ^3.0.4
+ version: 3.0.4
multiple-select-vanilla:
specifier: workspace:*
version: link:../lib
@@ -1384,6 +1390,12 @@ packages:
resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
dev: true
+ /@types/dompurify@3.0.4:
+ resolution: {integrity: sha512-1Jk8S/IRzNSbwQRbuGuLFHviwxQ8pX81ZEW3INY9432Cwb4VedkBYan8gSIXVLOLHBtimOmUTEYphjRVmo+30g==}
+ dependencies:
+ '@types/trusted-types': 2.0.5
+ dev: true
+
/@types/estree@1.0.0:
resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
dev: true
@@ -1418,6 +1430,10 @@ packages:
resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
dev: true
+ /@types/trusted-types@2.0.5:
+ resolution: {integrity: sha512-I3pkr8j/6tmQtKV/ZzHtuaqYSQvyjGRKH4go60Rr0IDLlFxuRT5V32uvB1mecM5G1EVAUyF/4r4QZ1GHgz+mxA==}
+ dev: true
+
/@typescript-eslint/eslint-plugin@6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.52.0)(typescript@5.2.2):
resolution: {integrity: sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg==}
engines: {node: ^16.0.0 || >=18.0.0}
@@ -2686,6 +2702,10 @@ packages:
domelementtype: 2.3.0
dev: true
+ /dompurify@3.0.6:
+ resolution: {integrity: sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==}
+ dev: false
+
/domutils@3.0.1:
resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
dependencies: