diff --git a/frontend/package.json b/frontend/package.json index 9e67d623..fe7aeb92 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -73,7 +73,6 @@ "@types/bun": "1.1.13", "@types/debug": "4.1.12", "@types/diff-match-patch": "1.0.36", - "@types/dompurify": "3.0.5", "@types/jsdom": "21.1.7", "@types/locale": "0.1.4", "@types/lodash-es": "4.17.12", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index c85442a9..6314dacb 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -153,9 +153,6 @@ importers: '@types/diff-match-patch': specifier: 1.0.36 version: 1.0.36 - '@types/dompurify': - specifier: 3.0.5 - version: 3.0.5 '@types/jsdom': specifier: 21.1.7 version: 21.1.7 @@ -1948,9 +1945,6 @@ packages: '@types/diff-match-patch@1.0.36': resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==} - '@types/dompurify@3.0.5': - resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==} - '@types/eslint@8.56.12': resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==} @@ -9042,10 +9036,6 @@ snapshots: '@types/diff-match-patch@1.0.36': {} - '@types/dompurify@3.0.5': - dependencies: - '@types/trusted-types': 2.0.7 - '@types/eslint@8.56.12': dependencies: '@types/estree': 1.0.6 diff --git a/frontend/src/composables/useDomPurify.ts b/frontend/src/composables/useDomPurify.ts index d3bd8a46..b6547b99 100644 --- a/frontend/src/composables/useDomPurify.ts +++ b/frontend/src/composables/useDomPurify.ts @@ -1,4 +1,4 @@ -import type { Config, DOMPurifyI } from "dompurify"; +import type { default as DOMPurify, Config } from "dompurify"; export const config = { FORBID_TAGS: ["style", "base", "head", "link", "meta", "title", "body", "form", "input", "dialog", "embed", "button", "frame", "html", "textarea"], @@ -8,12 +8,12 @@ export const config = { } as Config; export function useDomPurify(text?: string) { if (!text) return ""; - const dompurify = useNuxtApp().$dompurify as DOMPurifyI; + const dompurify = useNuxtApp().$dompurify as typeof DOMPurify; // TODO cleanup when DOMPurify exports the type in the next release // Manually handle iframe to allow YouTube video embeds - dompurify.addHook("uponSanitizeElement", (node: any, data) => { + dompurify.addHook("uponSanitizeElement", (node, data) => { if (data.tagName === "iframe") { - const src = node.getAttribute("src") || ""; + const src = (node as HTMLIFrameElement).getAttribute("src") || ""; if (!src.startsWith("https://www.youtube.com/embed/")) { return node.parentNode && node.parentNode.removeChild(node); } @@ -26,6 +26,6 @@ export function useDomPurify(text?: string) { export const aggressiveConfig = { ALLOWED_TAGS: ["#text"] } as Config; export function stripAllHtml(text?: string) { if (!text) return ""; - const dompurify = useNuxtApp().$dompurify as DOMPurifyI; + const dompurify = useNuxtApp().$dompurify as typeof DOMPurify; // TODO cleanup when DOMPurify exports the type in the next release return dompurify.sanitize(text, aggressiveConfig) as string; } diff --git a/frontend/src/plugins/dompurify.client.ts b/frontend/src/plugins/dompurify.client.ts index 18931245..92da96da 100644 --- a/frontend/src/plugins/dompurify.client.ts +++ b/frontend/src/plugins/dompurify.client.ts @@ -1,7 +1,7 @@ import DOMPurify from "dompurify"; export default defineNuxtPlugin((nuxtApp) => { - const purify = DOMPurify(); + const purify = DOMPurify(window); return { provide: { dompurify: purify,