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

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

Hide file tree

Showing 7 changed files with 12 additions and 56 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
@@ -32,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>
@@ -199,21 +202,13 @@ export class PixivIcon extends HTMLElement {
         ? this.svgContent
         : `<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
   }
 
   private async loadSvg(name: string) {
-    const iconResult = await getIcon(name)
-
-    if (iconResult.trusted) {
-      this.svgContent = iconResult.svgContent
-    } else {
-      const { default: DOMPurify } = await import('dompurify')
-      this.svgContent = DOMPurify.sanitize(iconResult.svgContent, {
-        USE_PROFILES: { svg: true, svgFilters: true },
-      })
-    }
+    this.svgContent = await getIcon(name)
     this.render()
   }
 

diff --git a/packages/icons/src/loaders/CharcoalIconFilesLoader.ts b/packages/icons/src/loaders/CharcoalIconFilesLoader.ts
@@ -14,10 +14,6 @@ export class CharcoalIconFilesLoader implements Loadable {
     this._name = name
   }
 
-  get trusted() {
-    return true
-  }
-
   get importIconFile() {
     return charcoalIconFiles[this._name]
   }

diff --git a/packages/icons/src/loaders/CustomIconLoader.ts b/packages/icons/src/loaders/CustomIconLoader.ts
@@ -15,10 +15,6 @@ export class CustomIconLoader implements Loadable {
     this._filePathOrUrl = filePathOrUrl
   }
 
-  get trusted() {
-    return false
-  }
-
   async fetch(): Promise<string> {
     if (this._resultSvg !== undefined) {
       return this._resultSvg

diff --git a/packages/icons/src/loaders/Loadable.ts b/packages/icons/src/loaders/Loadable.ts
@@ -1,4 +1,3 @@
 export interface Loadable {
-  readonly trusted: boolean
   fetch(): Promise<string>
 }
diff --git a/packages/icons/src/loaders/index.ts b/packages/icons/src/loaders/index.ts
@@ -21,16 +21,13 @@ export async function getIcon(name: string) {
     throw new PixivIconLoadError(name, 'Loader was not found')
   }
 
-  return loader
-    .fetch()
-    .then((svgContent) => ({ trusted: loader.trusted, svgContent }))
-    .catch((e) => {
-      if (e instanceof PixivIconLoadError) {
-        throw e
-      }
-
-      throw new PixivIconLoadError(name, e)
-    })
+  return loader.fetch().catch((e) => {
+    if (e instanceof PixivIconLoadError) {
+      throw e
+    }
+
+    throw new PixivIconLoadError(name, e)
+  })
 }
 
 function resolveIconLoader(name: string) {

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"