chore: add CSP (Content Security Policy) to demo (#150)

- last few PRs made the lib more CSP compliant, this PR simply adds the CSP meta tag to the online demo
ghiscoding · Nov 7, 2023 · 82b5baf · 82b5baf
1 parent 8bd346b
commit 82b5baf
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self' 'unsafe-inline' data:; img-src * 'self' data: https:; require-trusted-types-for 'script'; trusted-types dompurify">
     <title>Multiple-Select-Vanilla demo with Vite + TS</title>
   </head>
   <body>

diff --git 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
@@ -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<HTMLDivElement>('#app')!.innerHTML = mainHtml;
+    document.querySelector<HTMLDivElement>('#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