fix!(@charcoal-ui/icons): remove dompurify from v4. Users should sani…

…tize the svg content before passing to charcoal
pixiv · Oct 24, 2024 · eaa7587 · eaa7587
1 parent db17dd4
commit eaa7587
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 37 deletions.
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -22,7 +22,6 @@
   },
   "devDependencies": {
     "@storybook/react": "^8.0.5",
-    "@types/dompurify": "^2.3.3",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.38",
     "@types/warning": "^3.0.0",
@@ -38,7 +37,6 @@
   },
   "dependencies": {
     "@charcoal-ui/icon-files": "^4.0.0-beta.15",
-    "dompurify": "^2.3.6",
     "warning": "^4.0.3"
   },
   "files": [

diff --git a/packages/icons/src/PixivIcon.ts b/packages/icons/src/PixivIcon.ts
@@ -3,7 +3,6 @@ import warning from 'warning'
 import { KnownIconFile } from './charcoalIconFiles'
 import { getIcon, addCustomIcon } from './loaders'
 import { __SERVER__ } from './ssr'
-import DOMPurify from 'dompurify'
 
 const attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const
 
@@ -33,6 +32,9 @@ type Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがn
 export class PixivIcon extends HTMLElement {
   static readonly tagName = 'pixiv-icon'
 
+  /**
+   * NOTE: icon content should be sanitized before pass to extend()
+   */
   static extend(
     map: Extended extends true
       ? Record<ExtendedIconFile, string>
@@ -179,8 +181,7 @@ export class PixivIcon extends HTMLElement {
   render() {
     const size = this.forceResizedSize ?? this.scaledSize
 
-    const style = DOMPurify.sanitize(
-      `<style>
+    const style = `<style>
   :host {
     display: inline-flex;
     --size: ${size}px;
@@ -190,17 +191,14 @@ export class PixivIcon extends HTMLElement {
     width: var(--size);
     height: var(--size);
   }
-</style>`,
-      { ALLOWED_TAGS: ['style'], FORCE_BODY: true }
-    )
+</style>`
 
-    const svg = DOMPurify.sanitize(
+    const svg =
       this.svgContent !== undefined
         ? this.svgContent
-        : `<svg viewBox="0 0 ${size} ${size}"></svg>`,
-      { USE_PROFILES: { svg: true, svgFilters: true } }
-    )
+        : `<svg viewBox="0 0 ${size} ${size}"></svg>`
 
+    // NOTE: User should sanitize the svg content before passing to charcoal.
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     this.shadowRoot!.innerHTML = style + svg
   }

diff --git a/yarn.lock b/yarn.lock
@@ -2007,13 +2007,11 @@ __metadata:
   dependencies:
     "@charcoal-ui/icon-files": ^4.0.0-beta.15
     "@storybook/react": ^8.0.5
-    "@types/dompurify": ^2.3.3
     "@types/jest": ^27.4.0
     "@types/react": ^17.0.38
     "@types/warning": ^3.0.0
     "@types/webpack-env": ^1.18.1
     "@vitejs/plugin-react": ^4.3.1
-    dompurify: ^2.3.6
     jsdom: ^24.1.0
     react: ^17.0.2
     rimraf: ^3.0.2
@@ -8768,15 +8766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/dompurify@npm:^2.3.3":
-  version: 2.3.3
-  resolution: "@types/dompurify@npm:2.3.3"
-  dependencies:
-    "@types/trusted-types": "*"
-  checksum: 427e2dc60d94d13d7860a293b926b376727cb2f545a3334a3f2e7de695a2bb23058dd15108e49e0651378229b443ee8ae0028034b6f2df9a9008c04fb7ad6f8f
-  languageName: node
-  linkType: hard
-
 "@types/ejs@npm:^3.1.1":
   version: 3.1.2
   resolution: "@types/ejs@npm:3.1.2"
@@ -9476,13 +9465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/trusted-types@npm:*":
-  version: 2.0.2
-  resolution: "@types/trusted-types@npm:2.0.2"
-  checksum: 3371eef5f1c50e1c3c07a127c1207b262ba65b83dd167a1c460fc1b135a3fb0c97b9f508efebd383f239cc5dd5b7169093686a692a501fde9c3f7208657d9b0d
-  languageName: node
-  linkType: hard
-
 "@types/unist@npm:*":
   version: 2.0.3
   resolution: "@types/unist@npm:2.0.3"
@@ -14294,13 +14276,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dompurify@npm:^2.3.6":
-  version: 2.3.6
-  resolution: "dompurify@npm:2.3.6"
-  checksum: 4b2bbf6bc68ebd776aec4a533cef74a5ae30391eed528f3df748af71da318afdc298b6f40449bef093b7454ffd2ae82656636560474de5a3b34316b762c85b12
-  languageName: node
-  linkType: hard
-
 "domutils@npm:^1.5.1, domutils@npm:^1.7.0":
   version: 1.7.0
   resolution: "domutils@npm:1.7.0"