CVE-2024-40631 (TypeScript, published 2024-07-15T19:15Z)
Description: 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.


Severity: nan (CVSS v3 base score: )
Weakness: NVD-CWE-noinfo \u2014 Insufficient Information
There is insufficient information about the issue to classify it; details are unkown or unspecified.
Repository: https://github.com/udecode/plate
Files changed:
.changeset/selfish-dogs-buy.md
packages/media/src/media/useMediaState.spec.ts
packages/media/src/media/useMediaState.ts
Commit message: Harden media embed element against XSS


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,