CVE-2024-40631 (published 2024-07-15T19:15Z)

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.\n\n


Weakness information:
cwe_id: NVD-CWE-noinfo
cwe_name: Insufficient Information
description: There is insufficient information about the issue to classify it; details are unkown or unspecified.
extended_description: Insufficient Information

Fix information:
repo_url: https://github.com/udecode/plate
commit_details: repo_url: https://github.com/udecode/plate
author: Joe Anderson
author_date: 2024-07-06 14:00:56+01:00
msg: Harden media embed element against XSS
repository: repo_url: https://github.com/udecode/plate
repo_name: udecode/plate
description: The rich-text editor for React.
repo_language: TypeScript
owner: udecode
file_changes: filename: selfish-dogs-buy.md
change_type: ModificationType.ADD
diff: @@ -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.

programming_language: SQL
filename: useMediaState.spec.ts
change_type: ModificationType.ADD
diff: @@ -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();
+  });
+});

programming_language: TypeScript
filename: useMediaState.ts
change_type: ModificationType.MODIFY
diff: @@ -4,8 +4,9 @@ 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;
@@ -15,6 +16,30 @@ export type EmbedUrlData = {
 
 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,
 }: {
@@ -28,15 +53,10 @@ export const useMediaState = ({
   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]);
 
@@ -56,6 +76,6 @@ export const useMediaState = ({
     name,
     readOnly,
     selected,
-    url,
+    unsafeUrl: url,
   };
 };

programming_language: TypeScript