From fe622f39d29dc223feaca650d3109554901a64db Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 6 Nov 2023 18:22:42 -0500 Subject: [PATCH] chore: add CSP (Content Security Policy) to demo - last few PRs made the lib more CSP compliant, this PR simply adds the CSP meta tag to the online demo - note however that `style-src` is using `unsafe-inline` and should be adressed in the future but I think the blocker is mainly coming from Vite and might be fix soon by Vite's PR 14653 --- demo/index.html | 1 + demo/package.json | 2 ++ demo/src/main.ts | 9 +++++++-- pnpm-lock.yaml | 20 ++++++++++++++++++++ 4 files changed, 30 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index a947056a..8e94453c 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 3ed9085a..931c0508 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 f7216202..e7c16e8f 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 13502a95..53c9badf 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: