Merge pull request #4376 from serlo/sanitize-edusharing-embed-html

fix(plugin-edusharing): use DomPurify to sanitize embed html from edu-sharing
serlo · Dec 23, 2024 · 0fd968e · 0fd968e
2 parents 2118011 + 8eed625
commit 0fd968e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -50,6 +50,7 @@
     "@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",

diff --git a/packages/editor/src/plugins/edusharing-asset/renderer.tsx b/packages/editor/src/plugins/edusharing-asset/renderer.tsx
@@ -1,5 +1,6 @@
 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 { memo, useEffect, useState } from 'react'
 
@@ -86,8 +87,15 @@ export function EdusharingAssetRenderer(props: {
 
       const html = buildHtml(htmlSnippet, defineContainerHeight)
 
+      const sanitizedHtml = DOMPurify.sanitize(html, {
+        // We allow <script> and <iframe> elements. Those are part of the html snippet we get from edu-sharing and cannot be removed or the embed will break. <script> elements cannot be manipulated by the user and we can trust them.
+        ADD_TAGS: ['script', 'iframe'],
+        // Return entire html document including <html>, <body>, ...
+        WHOLE_DOCUMENT: true,
+      })
+
       setEmbedType(embedType)
-      setEmbedHtml(html)
+      setEmbedHtml(sanitizedHtml)
       setDefineContainerHeight(defineContainerHeight)
     }
 

diff --git a/yarn.lock b/yarn.lock
@@ -5798,6 +5798,7 @@ __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