CVE-2024-40631: Insufficient Information (NVD-CWE-noinfo)
value: Plate media is an open source, rich-text editor for React. Editors that use `MediaEmbedElement` and pass custom `urlParsers` to the `useMediaState` hook may be vulnerable to XSS if a custom parser allows `javascript:`, `data:` or `vbscript:` URLs to be embedded. Editors that do not use `urlParsers` and consume the `url` property directly may also be vulnerable if the URL is not sanitised. The default parsers `parseTwitterUrl` and `parseVideoUrl` are not affected. `@udecode/plate-media` 36.0.10 resolves this issue by only allowing HTTP and HTTPS URLs during parsing. This affects only the `embed` property returned from `useMediaState`. In addition, the `url` property returned from `useMediaState` has been renamed to `unsafeUrl` to indicate that it has not been sanitised. The `url` property on `element` is also unsafe, but has not been renamed. If you're using either of these properties directly, you will still need to validate the URL yourself. Users are advised to upgrade. Users unable to upgrade should ensure that any custom `urlParsers` do not allow `javascript:`, `data:` or `vbscript:` URLs to be returned in the `url` property of their return values. If `url` is consumed directly, validate the URL protocol before passing it to the `iframe` element.


CWE description: There is insufficient information about the issue to classify it; details are unkown or unspecified.
Published: 2024-07-15T19:15Z
Repository: https://github.com/udecode/plate
Language: TypeScript
Files changed: .changeset/selfish-dogs-buy.md, packages/media/src/media/useMediaState.spec.ts, packages/media/src/media/useMediaState.ts
Commit date: 2024-07-06 14:00:56 +0100
Commit message: Harden media embed element against XSS

Diff: diff --git a/.changeset/selfish-dogs-buy.md b/.changeset/selfish-dogs-buy.md
new file mode 100644
index 000000000..96f41c531
--- /dev/null
+++ b/.changeset/selfish-dogs-buy.md
@@ -0,0 +1,6 @@
+---
+"@udecode/plate-media": patch
+---
+
+- Explicitly prohibit `javascript:` protocol when parsing URLs in `useMediaState`.
+- In the return value of `useMediaState`, rename `url` to `unsafeUrl` to indicate that it has not been sanitised.
diff --git a/packages/media/src/media/useMediaState.spec.ts b/packages/media/src/media/useMediaState.spec.ts
new file mode 100644
index 000000000..9c4b05c2a
--- /dev/null
+++ b/packages/media/src/media/useMediaState.spec.ts
@@ -0,0 +1,37 @@
+import { type EmbedUrlParser, parseMediaUrl } from './useMediaState';
+
+describe('parseMediaUrl', () => {
+  const parsersWithoutFallback: EmbedUrlParser[] = [
+    (url) => (url.startsWith('a') ? { id: 'A' } : undefined),
+    (url) => (url.endsWith('b') ? { id: 'B' } : undefined),
+  ];
+
+  const parsersWithFallback: EmbedUrlParser[] = [
+    ...parsersWithoutFallback,
+    () => ({ id: 'C' }),
+  ];
+
+  it('returns undefined if no parsers match', () => {
+    const embed = parseMediaUrl('x', { urlParsers: parsersWithoutFallback });
+    expect(embed).toBeUndefined();
+  });
+
+  it('uses the first matching parser', () => {
+    const embed = parseMediaUrl('ab', { urlParsers: parsersWithoutFallback });
+    expect(embed?.id).toBe('A');
+  });
+
+  it('uses fallback parser if present', () => {
+    const embed = parseMediaUrl('javascript', {
+      urlParsers: parsersWithFallback,
+    });
+    expect(embed?.id).toBe('C');
+  });
+
+  it('does not allow javascript: URLs', () => {
+    const embed = parseMediaUrl('javascript:', {
+      urlParsers: parsersWithFallback,
+    });
+    expect(embed).toBeUndefined();
+  });
+});
diff --git a/packages/media/src/media/useMediaState.ts b/packages/media/src/media/useMediaState.ts
index 7c845c909..6091a4675 100644
--- a/packages/media/src/media/useMediaState.ts
+++ b/packages/media/src/media/useMediaState.ts
@@ -2,21 +2,46 @@ import React from 'react';
 
 import { useElement } from '@udecode/plate-common';
 import { useFocused, useReadOnly, useSelected } from 'slate-react';
 
 import type { TMediaElement } from './types';
+
+import { ELEMENT_MEDIA_EMBED, VIDEO_PROVIDERS } from '../media-embed';
 import { ELEMENT_VIDEO } from '../video';
-import { VIDEO_PROVIDERS, ELEMENT_MEDIA_EMBED} from '../media-embed';
 
 export type EmbedUrlData = {
   id?: string;
   provider?: string;
   url?: string;
 };
 
 export type EmbedUrlParser = (url: string) => EmbedUrlData | undefined;
 
+export const parseMediaUrl = (
+  url: string,
+  {
+    urlParsers,
+  }: {
+    urlParsers: EmbedUrlParser[];
+  }
+): EmbedUrlData | undefined => {
+  // Harden against XSS
+  try {
+    if (new URL(url).protocol === 'javascript:') {
+      return undefined;
+    }
+  } catch {}
+
+  for (const parser of urlParsers) {
+    const data = parser(url);
+
+    if (data) {
+      return data;
+    }
+  }
+};
+
 export const useMediaState = ({
   urlParsers,
 }: {
   urlParsers?: EmbedUrlParser[];
 } = {}) => {
@@ -26,19 +51,14 @@ export const useMediaState = ({
   const readOnly = useReadOnly();
 
   const { align = 'left', id, isUpload, name, type, url } = element;
 
   const embed = React.useMemo(() => {
-    if (!urlParsers || (type !== ELEMENT_VIDEO && type !== ELEMENT_MEDIA_EMBED)) return;
+    if (!urlParsers || (type !== ELEMENT_VIDEO && type !== ELEMENT_MEDIA_EMBED))
+      return;
 
-    for (const parser of urlParsers) {
-      const data = parser(url);
-
-      if (data) {
-        return data;
-      }
-    }
+    return parseMediaUrl(url, { urlParsers });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [urlParsers, url]);
 
   const isTweet = embed?.provider === 'twitter';
   const isVideo = !!embed?.provider && VIDEO_PROVIDERS.includes(embed.provider);
@@ -54,8 +74,8 @@ export const useMediaState = ({
     isVideo,
     isYoutube,
     name,
     readOnly,
     selected,
-    url,
+    unsafeUrl: url,
   };
 };

Vulnerable code: import { VIDEO_PROVIDERS, ELEMENT_MEDIA_EMBED} from '../media-embed';
    if (!urlParsers || (type !== ELEMENT_VIDEO && type !== ELEMENT_MEDIA_EMBED)) return;
    for (const parser of urlParsers) {
      const data = parser(url);

      if (data) {
        return data;
      }
    }
    url,
Fixed code: ---
"@udecode/plate-media": patch
---

- Explicitly prohibit `javascript:` protocol when parsing URLs in `useMediaState`.
- In the return value of `useMediaState`, rename `url` to `unsafeUrl` to indicate that it has not been sanitised.
import { type EmbedUrlParser, parseMediaUrl } from './useMediaState';

describe('parseMediaUrl', () => {
  const parsersWithoutFallback: EmbedUrlParser[] = [
    (url) => (url.startsWith('a') ? { id: 'A' } : undefined),
    (url) => (url.endsWith('b') ? { id: 'B' } : undefined),
  ];

  const parsersWithFallback: EmbedUrlParser[] = [
    ...parsersWithoutFallback,
    () => ({ id: 'C' }),
  ];

  it('returns undefined if no parsers match', () => {
    const embed = parseMediaUrl('x', { urlParsers: parsersWithoutFallback });
    expect(embed).toBeUndefined();
  });

  it('uses the first matching parser', () => {
    const embed = parseMediaUrl('ab', { urlParsers: parsersWithoutFallback });
    expect(embed?.id).toBe('A');
  });

  it('uses fallback parser if present', () => {
    const embed = parseMediaUrl('javascript', {
      urlParsers: parsersWithFallback,
    });
    expect(embed?.id).toBe('C');
  });

  it('does not allow javascript: URLs', () => {
    const embed = parseMediaUrl('javascript:', {
      urlParsers: parsersWithFallback,
    });
    expect(embed).toBeUndefined();
  });
});

import { ELEMENT_MEDIA_EMBED, VIDEO_PROVIDERS } from '../media-embed';
export const parseMediaUrl = (
  url: string,
  {
    urlParsers,
  }: {
    urlParsers: EmbedUrlParser[];
  }
): EmbedUrlData | undefined => {
  // Harden against XSS
  try {
    if (new URL(url).protocol === 'javascript:') {
      return undefined;
    }
  } catch {}

  for (const parser of urlParsers) {
    const data = parser(url);

    if (data) {
      return data;
    }
  }
};

    if (!urlParsers || (type !== ELEMENT_VIDEO && type !== ELEMENT_MEDIA_EMBED))
      return;
    return parseMediaUrl(url, { urlParsers });
    unsafeUrl: url,