From a6910b70a019c54b85763c23cefb2076349ed757 Mon Sep 17 00:00:00 2001
From: Joe Anderson <joe@mousetrapped.co.uk>
Date: Thu, 1 Aug 2024 15:41:44 +0100
Subject: [PATCH] Fix XSS in examples (#5688)

---
 site/examples/embeds.tsx     | 17 ++++++++++++++++-
 site/examples/inlines.tsx    | 17 ++++++++++++++++-
 site/examples/paste-html.tsx | 26 ++++++++++++++++++++++++--
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/site/examples/embeds.tsx b/site/examples/embeds.tsx
index 47e5951aff..248becff1e 100644
--- a/site/examples/embeds.tsx
+++ b/site/examples/embeds.tsx
@@ -41,9 +41,24 @@ const Element = props => {
   }
 }
 
+const allowedSchemes = ['http:', 'https:']
+
 const VideoElement = ({ attributes, children, element }) => {
   const editor = useSlateStatic()
   const { url } = element
+
+  const safeUrl = useMemo(() => {
+    let parsedUrl: URL = null
+    try {
+      parsedUrl = new URL(url)
+      // eslint-disable-next-line no-empty
+    } catch {}
+    if (parsedUrl && allowedSchemes.includes(parsedUrl.protocol)) {
+      return parsedUrl.href
+    }
+    return 'about:blank'
+  }, [url])
+
   return (
     <div {...attributes}>
       <div contentEditable={false}>
@@ -54,7 +69,7 @@ const VideoElement = ({ attributes, children, element }) => {
           }}
         >
           <iframe
-            src={`${url}?title=0&byline=0&portrait=0`}
+            src={`${safeUrl}?title=0&byline=0&portrait=0`}
             frameBorder="0"
             style={{
               position: 'absolute',
diff --git a/site/examples/inlines.tsx b/site/examples/inlines.tsx
index 8fbbf7c6b0..bd9d6764b5 100644
--- a/site/examples/inlines.tsx
+++ b/site/examples/inlines.tsx
@@ -242,12 +242,27 @@ const InlineChromiumBugfix = () => (
   </span>
 )
 
+const allowedSchemes = ['http:', 'https:', 'mailto:', 'tel:']
+
 const LinkComponent = ({ attributes, children, element }) => {
   const selected = useSelected()
+
+  const safeUrl = useMemo(() => {
+    let parsedUrl: URL = null
+    try {
+      parsedUrl = new URL(element.url)
+      // eslint-disable-next-line no-empty
+    } catch {}
+    if (parsedUrl && allowedSchemes.includes(parsedUrl.protocol)) {
+      return parsedUrl.href
+    }
+    return 'about:blank'
+  }, [element.url])
+
   return (
     <a
       {...attributes}
-      href={element.url}
+      href={safeUrl}
       className={
         selected
           ? css`
diff --git a/site/examples/paste-html.tsx b/site/examples/paste-html.tsx
index 4de68cc8f9..e7d058f516 100644
--- a/site/examples/paste-html.tsx
+++ b/site/examples/paste-html.tsx
@@ -160,15 +160,37 @@ const Element = props => {
       return <ol {...attributes}>{children}</ol>
     case 'link':
       return (
-        <a href={element.url} {...attributes}>
+        <SafeLink href={element.url} {...attributes}>
           {children}
-        </a>
+        </SafeLink>
       )
     case 'image':
       return <ImageElement {...props} />
   }
 }
 
+const allowedSchemes = ['http:', 'https:', 'mailto:', 'tel:']
+
+const SafeLink = ({ attributes, children, href }) => {
+  const safeHref = useMemo(() => {
+    let parsedUrl: URL = null
+    try {
+      parsedUrl = new URL(href)
+      // eslint-disable-next-line no-empty
+    } catch {}
+    if (parsedUrl && allowedSchemes.includes(parsedUrl.protocol)) {
+      return parsedUrl.href
+    }
+    return 'about:blank'
+  }, [href])
+
+  return (
+    <a href={safeHref} {...attributes}>
+      {children}
+    </a>
+  )
+}
+
 const ImageElement = ({ attributes, children, element }) => {
   const selected = useSelected()
   const focused = useFocused()