fix: use dompurify for html sanitization

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
hcengineering · Sep 13, 2024 · cdcd62c · cdcd62c
1 parent fc8564d
commit cdcd62c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 8 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -33,6 +33,7 @@
     "prettier": "^3.1.0",
     "typescript": "^5.3.3",
     "@types/jest": "^29.5.5",
+    "@types/dompurify": "^3.0.5",
     "jest": "^29.7.0",
     "ts-jest": "^29.1.1",
     "svelte-eslint-parser": "^0.33.1"
@@ -47,6 +48,7 @@
     "emoji-regex": "^10.1.0",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
+    "dompurify": "^3.1.6",
     "@hcengineering/analytics": "^0.6.0"
   },
   "repository": "https://github.com/hcenginneing/anticrm",

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -96,6 +96,7 @@ export { default as DatePresenter } from './components/calendar/DatePresenter.sv
 export { default as DueDatePresenter } from './components/calendar/DueDatePresenter.svelte'
 export { default as DateTimePresenter } from './components/calendar/DateTimePresenter.svelte'
 export { default as TimeInputBox } from './components/calendar/TimeInputBox.svelte'
+export { default as Html } from './components/Html.svelte'
 export { default as StylishEdit } from './components/StylishEdit.svelte'
 export { default as Grid } from './components/Grid.svelte'
 export { default as Row } from './components/Row.svelte'

diff --git a/plugins/diffview-resources/src/components/Highlight.svelte b/plugins/diffview-resources/src/components/Highlight.svelte
@@ -13,6 +13,8 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { Html } from '@hcengineering/ui'
+
   import { highlightText } from '../highlight'
 
   export let value: string
@@ -21,4 +23,4 @@
   $: highlighted = highlightText(value, { language })
 </script>
 
-{@html highlighted}
+<Html value={highlighted} />
diff --git a/plugins/diffview-resources/src/highlight/highlight.ts b/plugins/diffview-resources/src/highlight/highlight.ts
@@ -28,9 +28,7 @@ export function highlightText (text: string, options: HighlightOptions): string
   const { language } = options
   const validLanguage = language !== undefined && hljs.getLanguage(language) !== undefined
 
-  const { value: highlighted } = validLanguage
-    ? hljs.highlight(text, { language })
-    : hljs.highlightAuto(text)
+  const { value: highlighted } = validLanguage ? hljs.highlight(text, { language }) : hljs.highlightAuto(text)
 
   return normalizeHighlightTags(highlighted)
 }