src/components/Markdown/Viewer.tsx

@@ -2,15 +2,34 @@ import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 import { createDirectives, presetDirectiveConfigs } from 'marked-directive'
 import { youtubeDirective } from './YoutubeDirective'
+import { useMemo } from 'react'
 
 interface ViewerProps {
   markdown: string
 }
 
 export const Viewer = ({ markdown }: ViewerProps) => {
-  const html = marked
-    .use(createDirectives([...presetDirectiveConfigs, youtubeDirective]))
-    .parse(DOMPurify.sanitize(markdown), { async: false })
+  const html = useMemo(() => {
+    DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
+      if (node.nodeName && node.nodeName === 'IFRAME') {
+        const src = node.attributes.getNamedItem('src')
+        if (!(src && src.value.startsWith('https://www.youtube.com/embed/'))) {
+          node.remove()
+        }
+      }
+    })
+
+    return DOMPurify.sanitize(
+      marked
+        .use(createDirectives([...presetDirectiveConfigs, youtubeDirective]))
+        .parse(`${markdown}`, {
+          async: false
+        }),
+      {
+        ADD_TAGS: ['iframe']
+      }
+    )
+  }, [markdown])
 
   return (
     <div className='viewer' dangerouslySetInnerHTML={{ __html: html }}></div>

src/components/Markdown/YoutubeDirective.tsx

@@ -20,7 +20,7 @@ export const youtubeDirective: DirectiveConfig = {
     }
 
     if (vid) {
-      return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${vid}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
+      return `<iframe title="Video embed" width="560" height="315" src="https://www.youtube.com/embed/${vid}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
     }
 
     return false