From 75164623975d30a802613f993a6308fd0c195c63 Mon Sep 17 00:00:00 2001 From: yue Date: Thu, 24 Oct 2024 10:07:09 +0900 Subject: [PATCH] fix!(@charcoal-ui/icons): remove dompurify from v4. Users should sanitize the svg content before passing to charcoal --- packages/icons/package.json | 2 -- packages/icons/src/PixivIcon.ts | 15 ++++------- .../src/loaders/CharcoalIconFilesLoader.ts | 4 --- .../icons/src/loaders/CustomIconLoader.ts | 4 --- packages/icons/src/loaders/Loadable.ts | 1 - packages/icons/src/loaders/index.ts | 17 ++++++------- yarn.lock | 25 ------------------- 7 files changed, 12 insertions(+), 56 deletions(-) diff --git a/packages/icons/package.json b/packages/icons/package.json index b91fa7585..85ccb9cd0 100644 --- 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 index 15504205d..57a683ffc 100644 --- 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 @@ -199,21 +202,13 @@ export class PixivIcon extends HTMLElement { ? this.svgContent : `` + // 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 index 53f7ccc9c..c5bcc6303 100644 --- 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 index 2828d42df..680cd0b82 100644 --- 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 { if (this._resultSvg !== undefined) { return this._resultSvg diff --git a/packages/icons/src/loaders/Loadable.ts b/packages/icons/src/loaders/Loadable.ts index dafc16b3e..0e598e9aa 100644 --- 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 } diff --git a/packages/icons/src/loaders/index.ts b/packages/icons/src/loaders/index.ts index 302242ddc..4bdcedb29 100644 --- 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 index 0c87fe61c..cc9436d0d 100644 --- 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"