Merge pull request #4379 from serlo/math-renderer-sanitize-html

fix(math-renderer): sanitize html from katex

packages/editor/package.json

@@ -50,7 +50,6 @@
     "@open-iframe-resizer/react": "1.2.1",
     "@serlo/katex-styles": "1.0.1",
     "@vidstack/react": "next",
-    "dompurify": "^3.2.3",
     "isomorphic-dompurify": "^2.19.0",
     "lit": "^3.2.1",
     "motion": "^11.11.17",

packages/editor/src/plugins/edusharing-asset/renderer.tsx

@@ -1,7 +1,7 @@
 import EdusharingIcon from '@editor/editor-ui/assets/edusharing.svg'
 import { IframeResizer } from '@open-iframe-resizer/react'
-import DOMPurify from 'dompurify'
 import * as t from 'io-ts'
+import DOMPurify from 'isomorphic-dompurify'
 import { memo, useEffect, useState } from 'react'
 
 type EmbedType =

packages/editor/src/plugins/text/static-components/static-math.tsx

@@ -1,5 +1,6 @@
 import { sanitizeLatex } from '@editor/plugins/text/utils/sanitize-latex'
 import { cn } from '@editor/utils/cn'
+import DOMPurify from 'isomorphic-dompurify'
 import KaTeX from 'katex'
 // eslint-disable-next-line import/no-unassigned-import
 import 'katex/contrib/mhchem'
@@ -67,10 +68,13 @@ export function StaticMath({ src, inline }: StaticMathProps) {
           },
         })
       : ''
+
+    // Even though we can trust the html created by Katex we sanitize the html as a second guard against XSS.
+    const sanitizedHtml = DOMPurify.sanitize(html)
     return (
       <span
         className="inline-block py-1 [page-break-inside:avoid]"
-        dangerouslySetInnerHTML={{ __html: html }}
+        dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
       />
     )
   }

yarn.lock

@@ -5798,7 +5798,6 @@ __metadata:
     "@vitejs/plugin-react": ^4.3.3
     autoprefixer: ^10.4.20
     clsx: ^2.1.1
-    dompurify: ^3.2.3
     eslint: ^9.14.0
     eslint-config-next: ^15.0.3
     eslint-config-prettier: ^9.1.0