adding html code purifier to prevent XSS (which should not happen any…

…ways through ssl)
ls1intum · Jan 6, 2025 · 16ba1ae · 16ba1ae
1 parent 6593309
commit 16ba1ae
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/clients/core/src/Application/components/FormDescriptionHTML.tsx b/clients/core/src/Application/components/FormDescriptionHTML.tsx
@@ -1,10 +1,13 @@
 import { FormDescription } from '@/components/ui/form'
+import DOMPurify from 'dompurify'
 
 interface FormDescriptionHTMLProps {
   htmlCode: string
 }
 
 export const FormDescriptionHTML = ({ htmlCode }: FormDescriptionHTMLProps): JSX.Element => {
+  const sanitizedHtmlCode = DOMPurify.sanitize(htmlCode)
+
   return (
     <FormDescription>
       <style>
@@ -19,7 +22,7 @@ export const FormDescriptionHTML = ({ htmlCode }: FormDescriptionHTMLProps): JSX
             }
     `}
       </style>
-      <div dangerouslySetInnerHTML={{ __html: htmlCode }} />
+      <div dangerouslySetInnerHTML={{ __html: sanitizedHtmlCode }} />
     </FormDescription>
   )
 }
diff --git a/clients/package.json b/clients/package.json
@@ -40,6 +40,7 @@
         "clsx": "^2.1.1",
         "css-loader": "^7.1.2",
         "date-fns": "^4.1.0",
+        "dompurify": "^3.2.3",
         "file-saver": "^2.0.5",
         "jwt-decode": "^4.0.0",
         "keycloak-js": "22.0.5",

diff --git a/clients/yarn.lock b/clients/yarn.lock
@@ -4250,6 +4250,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@types/trusted-types@npm:2.0.7"
+  checksum: 10c0/4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
@@ -6922,6 +6929,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "dompurify@npm:3.2.3"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.7"
+  dependenciesMeta:
+    "@types/trusted-types":
+      optional: true
+  checksum: 10c0/0ce5cb89b76f396d800751bcb48e0d137792891d350ccc049f1bc9a5eca7332cc69030c25007ff4962e0824a5696904d4d74264df9277b5ad955642dfb6f313f
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.5.2, domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -12740,6 +12759,7 @@ __metadata:
     clsx: "npm:^2.1.1"
     css-loader: "npm:^7.1.2"
     date-fns: "npm:^4.1.0"
+    dompurify: "npm:^3.2.3"
     eslint: "npm:^8.57.0"
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-import: "npm:^2.29.1"