Don't render videos with relative or invalid URLs, show the error in development builds

CHANGELOG.md

@@ -60,6 +60,7 @@ Legends:
 - Fixed the play, mute, and "more options" icons of audio players being invisible in dark high contrast themes, such as "Aquatic" on Windows, fixes [#5710](https://github.com/microsoft/BotFramework-WebChat/issues/5710), in PR [#5906](https://github.com/microsoft/BotFramework-WebChat/pull/5906), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed the "Positive" card action button having less than 4.5:1 color contrast, fixes [#5713](https://github.com/microsoft/BotFramework-WebChat/issues/5713), in PR [#5905](https://github.com/microsoft/BotFramework-WebChat/pull/5905), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08
 

__tests__/html2/attachment/video.url.html

@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "jest-mock": "https://esm.sh/jest-mock",
+          "react": "https://esm.sh/react@18.3.1",
+          "react-dom": "https://esm.sh/react-dom@18.3.1",
+          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
+        }
+      }
+    </script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script crossorigin="anonymous" defer src="/__dist__/webchat-es5.js"></script>
+    <script crossorigin="anonymous" defer src="/__dist__/botframework-webchat-debug-theme.development.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+      import { spyOn } from 'jest-mock';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          testHelpers: { createDirectLineEmulator },
+          WebChat: { DebugProvider, ReactWebChat }
+        } = window;
+
+        // Record every URL the page requests, regardless of the size of the resource timing buffer.
+        const requestedURLs = [];
+
+        new PerformanceObserver(list => requestedURLs.push(...list.getEntries().map(({ name }) => name))).observe({
+          type: 'resource'
+        });
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        // GIVEN: A development build of Web Chat with <DebugProvider>, which shows an error box for attachments that fail to render.
+        createRoot(document.getElementById('webchat')).render(
+          createElement(DebugProvider, {}, createElement(ReactWebChat, { directLine, store }))
+        );
+
+        await pageConditions.uiConnected();
+
+        // Development builds log invalid props as errors, record them and log them as warnings instead.
+        const consoleError = spyOn(console, 'error').mockImplementation(console.warn.bind(console));
+
+        // Every relative URL points to the existing dark green video when resolved against this page.
+        const relativeURLs = [
+          '/assets/dark-green-video.webm?root-relative',
+          '../../assets/dark-green-video.webm?path-relative',
+          `//${location.host}/assets/dark-green-video.webm?protocol-relative`
+        ];
+
+        // WHEN: The bot sends a video attachment, a video card, and an animation card, each with a relative URL.
+        await directLine.emulateIncomingActivity({
+          attachments: [{ contentType: 'video/webm', contentUrl: relativeURLs[0], name: 'Video attachment' }],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                buttons: [{ title: 'Watch later', type: 'imBack', value: 'watch later' }],
+                media: [{ url: relativeURLs[1] }],
+                text: 'Video card text',
+                title: 'Video card'
+              },
+              contentType: 'application/vnd.microsoft.card.video'
+            }
+          ],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              content: {
+                buttons: [{ title: 'Show more', type: 'imBack', value: 'show more' }],
+                media: [{ url: relativeURLs[2] }],
+                text: 'Animation card text',
+                title: 'Animation card'
+              },
+              contentType: 'application/vnd.microsoft.card.animation'
+            }
+          ],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(3);
+
+        // THEN: Every attachment should show the error box instead, the same as other attachments that fail to render.
+        const validationErrorMessage = 'botframework-webchat: Validation error while parsing props.';
+        const getErrorMessages = () =>
+          pageElements
+            .activities()
+            .map(activityElement =>
+              Array.from(activityElement.querySelectorAll('summary'), ({ textContent }) => textContent)
+            );
+
+        await waitFor(() =>
+          expect(getErrorMessages()).toEqual([
+            [validationErrorMessage],
+            [validationErrorMessage],
+            [validationErrorMessage]
+          ])
+        );
+
+        // THEN: The error box should replace the whole card.
+        expect(pageElements.activities()[1].textContent).not.toContain('Video card text');
+        expect(pageElements.activities()[2].textContent).not.toContain('Animation card text');
+
+        // THEN: No video should be shown or embedded.
+        expect(document.querySelector('iframe, video')).toBeNull();
+
+        await pageConditions.scrollToBottomCompleted();
+        await host.snapshot('local');
+
+        // WHEN: The bot sends video attachments with URLs that cannot be parsed and a protocol-relative YouTube URL.
+        const invalidURLs = ['https://', 'http://[invalid', '//www.youtube.com/watch?v=dQw4w9WgXcQ'];
+
+        await directLine.emulateIncomingActivity({
+          attachments: invalidURLs.map(contentUrl => ({
+            contentType: 'video/mp4',
+            contentUrl,
+            name: 'Video with an invalid URL'
+          })),
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(4);
+
+        // THEN: Every attachment should show the error box instead.
+        await waitFor(() =>
+          expect(getErrorMessages()[3]).toEqual([
+            validationErrorMessage,
+            validationErrorMessage,
+            validationErrorMessage
+          ])
+        );
+
+        // THEN: No video should be shown or embedded.
+        expect(document.querySelector('iframe, video')).toBeNull();
+
+        // THEN: The console should tell which URLs are invalid.
+        expect(
+          new Set(
+            consoleError.mock.calls
+              .filter(([error, issues]) => error?.message === validationErrorMessage && Array.isArray(issues))
+              .flatMap(([, issues]) => issues.map(({ input }) => input))
+          )
+        ).toEqual(new Set([...relativeURLs, ...invalidURLs]));
+
+        consoleError.mockRestore();
+
+        // WHEN: The bot sends YouTube and Vimeo URLs without a video ID, which cannot be embedded.
+        await directLine.emulateIncomingActivity({
+          attachments: ['https://www.youtube.com/@Microsoft', 'https://youtu.be/', 'https://vimeo.com/'].map(
+            contentUrl => ({ contentType: 'video/mp4', contentUrl, name: 'Video without a video ID' })
+          ),
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(5);
+
+        // THEN: They should show a video player with the URL as-is, the same as other absolute URLs that cannot be embedded.
+        expect(
+          Array.from(pageElements.activities()[4].querySelectorAll('video'), videoElement =>
+            videoElement.getAttribute('src')
+          )
+        ).toEqual(['https://www.youtube.com/@Microsoft', 'https://youtu.be/', 'https://vimeo.com/']);
+
+        // THEN: YouTube and Vimeo URLs without a video ID should not be embedded.
+        expect(document.querySelector('iframe')).toBeNull();
+
+        // WHEN: The bot sends a video attachment with an absolute URL.
+        const absoluteURL = new URL('/assets/dark-green-video.webm?absolute', location.href).href;
+
+        await directLine.emulateIncomingActivity({
+          attachments: [{ contentType: 'video/webm', contentUrl: absoluteURL, name: 'Video with an absolute URL' }],
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(6);
+
+        // THEN: It should be requested and loaded.
+        const absoluteVideoElement = pageElements.activities()[5].querySelector('video');
+
+        expect(absoluteVideoElement.getAttribute('src')).toBe(absoluteURL);
+
+        await waitFor(() => expect(absoluteVideoElement.readyState).toBe(HTMLMediaElement.HAVE_ENOUGH_DATA));
+        await waitFor(() => expect(requestedURLs).toContain(absoluteURL));
+
+        // THEN: The relative URLs should never be requested from the server of this page.
+        expect(
+          relativeURLs.map(url => new URL(url, location.href).href).filter(url => requestedURLs.includes(url))
+        ).toEqual([]);
+      });
+    </script>
+  </body>
+</html>

packages/component/src/Attachment/VideoContent.spec.tsx

@@ -0,0 +1,34 @@
+/** @jest-environment @happy-dom/jest-environment */
+/// <reference types="jest" />
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import VideoContent from './VideoContent';
+
+// Production builds of `validateProps()` return props as-is, the URL is not validated.
+jest.mock('@msinternal/botframework-webchat-react-valibot', () => ({
+  ...jest.requireActual('@msinternal/botframework-webchat-react-valibot'),
+  validateProps: (_: unknown, props: unknown) => props
+}));
+
+// The video player needs the Web Chat context, it is not under test.
+jest.mock('../hooks/useStyleSet', () => () => [{ videoContent: '' }]);
+
+test.each([
+  ['root-relative', '/videos/intro.mp4'],
+  ['path-relative', 'intro.mp4'],
+  ['protocol-relative', '//example.com/intro.mp4'],
+  ['without a host', 'https://'],
+  ['with an invalid host', 'http://[invalid']
+])('when the URL is %s in production build, should render nothing', (_, src) => {
+  const { container } = render(<VideoContent src={src} />);
+
+  expect(container.innerHTML).toBe('');
+});
+
+test('when the URL is absolute in production build, should render a video player', () => {
+  const { container } = render(<VideoContent src="https://example.com/intro.mp4" />);
+
+  expect(container.querySelector('video')?.getAttribute('src')).toBe('https://example.com/intro.mp4');
+});

packages/component/src/Attachment/VideoContent.tsx

@@ -1,6 +1,7 @@
 import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { onErrorResumeNext } from 'botframework-webchat-core';
 import React, { memo } from 'react';
-import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { boolean, object, optional, pipe, readonly, string, url, type InferInput } from 'valibot';
 
 import HTMLVideoContent from './HTMLVideoContent';
 import VimeoContent from './VimeoContent';
@@ -13,31 +14,14 @@ const YOUTUBE_WWW_SHORT_DOMAIN = 'www.youtu.be';
 const VIMEO_DOMAIN = 'vimeo.com';
 const VIMEO_WWW_DOMAIN = 'www.vimeo.com';
 
-// This is a workaround
-// - Today, there is no good URL polyfill for older browser
-// - Instead of writing a URL parser, for older browser, we will use this <a href> trick to parse the URL
-function parseURL(url) {
-  let urlLike;
-
-  if (typeof URL === 'function') {
-    urlLike = new URL(url);
-  } else {
-    urlLike = document.createElement('a');
-    urlLike.setAttribute('href', url);
-  }
-
-  const { hostname, pathname, search } = urlLike;
-
-  return { hostname, pathname, search };
-}
-
 const videoContentPropsSchema = pipe(
   object({
     alt: optional(string()),
     autoPlay: optional(boolean()),
     loop: optional(boolean()),
     poster: optional(string()),
-    src: string()
+    // Relative URLs are not supported, they would point to a different server in each chat client.
+    src: pipe(string(), url())
   }),
   readonly()
 );
@@ -47,26 +31,26 @@ type VideoContentProps = InferInput<typeof videoContentPropsSchema>;
 function VideoContent(props: VideoContentProps) {
   const { alt, autoPlay = false, loop = false, poster, src } = validateProps(videoContentPropsSchema, props);
 
-  const { hostname, pathname, search } = parseURL(src);
-  const lastSegment = pathname.split('/').pop();
-  const searchParams = new URLSearchParams(search);
-
-  switch (hostname) {
-    case VIMEO_DOMAIN:
-    case VIMEO_WWW_DOMAIN:
-      return <VimeoContent alt={alt} autoPlay={autoPlay} embedID={lastSegment} loop={loop} />;
-
-    case YOUTUBE_DOMAIN:
-    case YOUTUBE_WWW_DOMAIN:
-      return <YouTubeContent alt={alt} autoPlay={autoPlay} embedID={searchParams.get('v')} loop={loop} />;
-
-    case YOUTUBE_SHORT_DOMAIN:
-    case YOUTUBE_WWW_SHORT_DOMAIN:
-      return <YouTubeContent alt={alt} autoPlay={autoPlay} embedID={lastSegment} loop={loop} />;
-
-    default:
-      return <HTMLVideoContent alt={alt} autoPlay={autoPlay} loop={loop} poster={poster} src={src} />;
-  }
+  const parsedURL = onErrorResumeNext(() => new URL(src));
+  const hostname = parsedURL?.hostname;
+  const lastSegment = parsedURL?.pathname.split('/').pop();
+
+  // Embed YouTube and Vimeo videos only when the URL has a video ID, otherwise, play the URL in <video>.
+  const vimeoEmbedID = (hostname === VIMEO_DOMAIN || hostname === VIMEO_WWW_DOMAIN) && lastSegment;
+  const youTubeEmbedID =
+    hostname === YOUTUBE_DOMAIN || hostname === YOUTUBE_WWW_DOMAIN
+      ? parsedURL?.searchParams.get('v')
+      : (hostname === YOUTUBE_SHORT_DOMAIN || hostname === YOUTUBE_WWW_SHORT_DOMAIN) && lastSegment;
+
+  // Production builds do not validate props, leave out the video if the URL is relative or cannot be parsed.
+  // When `validateProps()` is enabled for production, remove this branch as it will be unreachable.
+  return !parsedURL ? null : vimeoEmbedID ? (
+    <VimeoContent alt={alt} autoPlay={autoPlay} embedID={vimeoEmbedID} loop={loop} />
+  ) : youTubeEmbedID ? (
+    <YouTubeContent alt={alt} autoPlay={autoPlay} embedID={youTubeEmbedID} loop={loop} />
+  ) : (
+    <HTMLVideoContent alt={alt} autoPlay={autoPlay} loop={loop} poster={poster} src={src} />
+  );
 }
 
 export default memo(VideoContent);