Add HTML content transformer middleware

CHANGELOG.md

@@ -30,6 +30,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  `styleOptions.bubbleMaxWidth`/`bubbleMinWidth` is being deprecated in favor of `styleOptions.bubbleAttachmentMaxWidth`/`bubbleAttachmentMinWidth` and `styleOptions.bubbleMessageMaxWidth`/`bubbleMessageMinWidth`. The option will be removed on or after 2026-10-08
 -  Moved to `micromark` for rendering Markdown, instead of `markdown-it`
    -  Please refer to PR [#5330](https://github.com/microsoft/BotFramework-WebChat/pull/5330) for details
+-  HTML sanitizer is moved from `renderMarkdown` to HTML content transformer middleware, please refer to PR [#5338](https://github.com/microsoft/BotFramework-WebChat/pull/5338)
+   -  If you customized `renderMarkdown` with a custom HTML sanitizer, please move the HTML sanitizer to the new HTML content transformer middleware
 
 ### Added
 
@@ -64,6 +66,10 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Added code viewer dialog with syntax highlighting, in PR [#5335](https://github.com/microsoft/BotFramework-WebChat/pull/5335), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added copy button to code blocks, in PR [#5334](https://github.com/microsoft/BotFramework-WebChat/pull/5334), by [@compulim](https://github.com/compulim)
 -  Added copy button to view code dialog, in PR [#5336](https://github.com/microsoft/BotFramework-WebChat/pull/5336), by [@compulim](https://github.com/compulim)
+-  Added HTML content transformer middleware, in PR [#5338](https://github.com/microsoft/BotFramework-WebChat/pull/5338), by [@compulim](https://github.com/compulim)
+   -  HTML content transformer is used by `useRenderMarkdown` to transform the result from `renderMarkdown`
+   -  HTML sanitizer is moved from `renderMarkdown` into HTML content transformer for better coverage
+   -  Copy button is added to fenced code blocks (`<pre><code>`)
 
 ### Changed
 

packages/bundle/src/AddFullBundle.tsx

@@ -3,6 +3,7 @@ import {
   type AttachmentMiddleware,
   type StyleOptions
 } from 'botframework-webchat-api';
+import { type HTMLContentTransformMiddleware } from 'botframework-webchat-component';
 import { singleToArray, warnOnce, type OneOrMany } from 'botframework-webchat-core';
 import React, { type ReactNode } from 'react';
 
@@ -18,6 +19,7 @@ type AddFullBundleProps = Readonly<{
   attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
   attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
   children: ({ extraStyleSet }: { extraStyleSet: any }) => ReactNode;
+  htmlContentTransformMiddleware?: HTMLContentTransformMiddleware[];
   renderMarkdown?: (
     markdown: string,
     newLineOptions: { markdownRespectCRLF: boolean },
@@ -41,6 +43,7 @@ const AddFullBundle = ({
   attachmentForScreenReaderMiddleware,
   attachmentMiddleware,
   children,
+  htmlContentTransformMiddleware,
   renderMarkdown,
   styleOptions,
   styleSet
@@ -50,6 +53,7 @@ const AddFullBundle = ({
   const patchedProps = useComposerProps({
     attachmentForScreenReaderMiddleware: singleToArray(attachmentForScreenReaderMiddleware),
     attachmentMiddleware: singleToArray(attachmentMiddleware),
+    htmlContentTransformMiddleware,
     renderMarkdown,
     styleOptions,
     styleSet

packages/bundle/src/markdown/createHTMLContentTransformMiddleware.ts

@@ -0,0 +1,8 @@
+import { type HTMLContentTransformMiddleware } from 'botframework-webchat-component';
+
+import createCodeBlockCopyButtonMiddleware from './middleware/createCodeBlockCopyButtonMiddleware';
+import createSanitizeMiddleware from './middleware/createSanitizeMiddleware';
+
+export default function createHTMLContentTransformMiddleware(): readonly HTMLContentTransformMiddleware[] {
+  return Object.freeze([createCodeBlockCopyButtonMiddleware(), createSanitizeMiddleware()]);
+}

packages/bundle/src/markdown/middleware/createCodeBlockCopyButtonMiddleware.ts

@@ -0,0 +1,18 @@
+import { type HTMLContentTransformMiddleware } from 'botframework-webchat-component';
+
+import codeBlockCopyButtonDocumentMod from '../private/codeBlockCopyButtonDocumentMod';
+
+export default function createCodeBlockCopyButtonMiddleware(): HTMLContentTransformMiddleware {
+  return () => next => request =>
+    next(
+      Object.freeze({
+        ...request,
+        documentFragment: codeBlockCopyButtonDocumentMod(request.documentFragment, {
+          codeBlockCopyButtonAltCopied: request.codeBlockCopyButtonAltCopied,
+          codeBlockCopyButtonAltCopy: request.codeBlockCopyButtonAltCopy,
+          codeBlockCopyButtonClassName: request.codeBlockCopyButtonClassName,
+          codeBlockCopyButtonTagName: request.codeBlockCopyButtonTagName
+        })
+      })
+    );
+}

packages/bundle/src/markdown/middleware/createSanitizeMiddleware.ts

@@ -0,0 +1,109 @@
+import {
+  parseDocumentFragmentFromString,
+  serializeDocumentFragmentIntoString
+} from 'botframework-webchat-component/internal';
+import sanitizeHTML from 'sanitize-html';
+
+const BASE_SANITIZE_HTML_OPTIONS = Object.freeze({
+  allowedAttributes: {
+    a: ['aria-label', 'class', 'href', 'name', 'rel', 'target'],
+    button: ['aria-label', 'class', 'type', 'value'],
+    img: ['alt', 'aria-label', 'class', 'src', 'title'],
+    pre: ['class'],
+    span: ['aria-label']
+  },
+  allowedSchemes: ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'],
+  allowedTags: [
+    'a',
+    'b',
+    'blockquote',
+    'br',
+    'button',
+    'caption',
+    'code',
+    'del',
+    'div',
+    'em',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'img',
+    'ins',
+    'li',
+    'nl',
+    'ol',
+    'p',
+    'pre',
+    's',
+    'span',
+    'strike',
+    'strong',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'ul',
+
+    // Followings are for MathML elements, from https://developer.mozilla.org/en-US/docs/Web/MathML.
+    'annotation-xml',
+    'annotation',
+    'math',
+    'merror',
+    'mfrac',
+    'mi',
+    'mmultiscripts',
+    'mn',
+    'mo',
+    'mover',
+    'mpadded',
+    'mphantom',
+    'mprescripts',
+    'mroot',
+    'mrow',
+    'ms',
+    'mspace',
+    'msqrt',
+    'mstyle',
+    'msub',
+    'msubsup',
+    'msup',
+    'mtable',
+    'mtd',
+    'mtext',
+    'mtr',
+    'munder',
+    'munderover',
+    'semantics'
+  ],
+  // Bug of https://github.com/apostrophecms/sanitize-html/issues/633.
+  // They should not remove `alt=""` even though it is empty.
+  nonBooleanAttributes: []
+});
+
+export default function createSanitizeMiddleware() {
+  return () => () => request => {
+    const { codeBlockCopyButtonTagName, documentFragment } = request;
+    const sanitizeHTMLOptions = {
+      ...BASE_SANITIZE_HTML_OPTIONS,
+      allowedAttributes: {
+        ...BASE_SANITIZE_HTML_OPTIONS.allowedAttributes,
+        [codeBlockCopyButtonTagName]: ['class', 'data-alt-copy', 'data-alt-copied', 'data-testid', 'data-value']
+      },
+      allowedTags: [...BASE_SANITIZE_HTML_OPTIONS.allowedTags, codeBlockCopyButtonTagName]
+    };
+
+    const htmlAfterBetterLink = serializeDocumentFragmentIntoString(documentFragment);
+
+    const htmlAfterSanitization = sanitizeHTML(htmlAfterBetterLink, sanitizeHTMLOptions);
+
+    return parseDocumentFragmentFromString(htmlAfterSanitization);
+  };
+}

packages/bundle/src/markdown/private/codeBlockCopyButtonDocumentMod.ts

@@ -5,23 +5,29 @@ export default function codeBlockCopyButtonDocumentMod<T extends Document | Docu
     codeBlockCopyButtonAltCopy,
     codeBlockCopyButtonClassName,
     codeBlockCopyButtonTagName
-  }: {
+  }: Readonly<{
     codeBlockCopyButtonAltCopied: string;
     codeBlockCopyButtonAltCopy: string;
     codeBlockCopyButtonClassName: string;
     codeBlockCopyButtonTagName: string;
-  }
+  }>
 ): T {
   for (const preElement of [...documentFragment.querySelectorAll('pre')]) {
-    const codeBlockCopyButtonElement = documentFragment.ownerDocument.createElement(codeBlockCopyButtonTagName);
+    if (preElement.children.length === 1) {
+      const [firstChild] = preElement.children;
+
+      if (firstChild.matches('code')) {
+        const codeBlockCopyButtonElement = documentFragment.ownerDocument.createElement(codeBlockCopyButtonTagName);
 
-    codeBlockCopyButtonElement.className = codeBlockCopyButtonClassName;
-    codeBlockCopyButtonElement.dataset.altCopied = codeBlockCopyButtonAltCopied;
-    codeBlockCopyButtonElement.dataset.altCopy = codeBlockCopyButtonAltCopy;
-    codeBlockCopyButtonElement.dataset.value = preElement.textContent;
+        codeBlockCopyButtonElement.className = codeBlockCopyButtonClassName;
+        codeBlockCopyButtonElement.dataset.altCopied = codeBlockCopyButtonAltCopied;
+        codeBlockCopyButtonElement.dataset.altCopy = codeBlockCopyButtonAltCopy;
+        codeBlockCopyButtonElement.dataset.value = preElement.textContent;
 
-    preElement.classList.add('webchat__render-markdown__code-block');
-    preElement.prepend(codeBlockCopyButtonElement);
+        preElement.classList.add('webchat__render-markdown__code-block');
+        preElement.prepend(codeBlockCopyButtonElement);
+      }
+    }
   }
 
   return documentFragment;

packages/bundle/src/markdown/renderMarkdown.ts

@@ -6,125 +6,24 @@ import { onErrorResumeNext } from 'botframework-webchat-core';
 import { micromark } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import { math, mathHtml } from 'micromark-extension-math';
-import sanitizeHTML from 'sanitize-html';
 
 import betterLinkDocumentMod, { BetterLinkDocumentModDecoration } from './private/betterLinkDocumentMod';
-import codeBlockCopyButtonDocumentMod from './private/codeBlockCopyButtonDocumentMod';
 import iterateLinkDefinitions from './private/iterateLinkDefinitions';
 import { pre as respectCRLFPre } from './private/respectCRLF';
 
-const SANITIZE_HTML_OPTIONS = Object.freeze({
-  allowedAttributes: {
-    a: ['aria-label', 'class', 'href', 'name', 'rel', 'target'],
-    button: ['aria-label', 'class', 'type', 'value'],
-    img: ['alt', 'aria-label', 'class', 'src', 'title'],
-    pre: ['class'],
-    span: ['aria-label']
-  },
-  allowedSchemes: ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'],
-  allowedTags: [
-    'a',
-    'b',
-    'blockquote',
-    'br',
-    'button',
-    'caption',
-    'code',
-    'del',
-    'div',
-    'em',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'hr',
-    'i',
-    'img',
-    'ins',
-    'li',
-    'nl',
-    'ol',
-    'p',
-    'pre',
-    's',
-    'span',
-    'strike',
-    'strong',
-    'table',
-    'tbody',
-    'td',
-    'tfoot',
-    'th',
-    'thead',
-    'tr',
-    'ul',
-
-    // Followings are for MathML elements, from https://developer.mozilla.org/en-US/docs/Web/MathML.
-    'annotation-xml',
-    'annotation',
-    'math',
-    'merror',
-    'mfrac',
-    'mi',
-    'mmultiscripts',
-    'mn',
-    'mo',
-    'mover',
-    'mpadded',
-    'mphantom',
-    'mprescripts',
-    'mroot',
-    'mrow',
-    'ms',
-    'mspace',
-    'msqrt',
-    'mstyle',
-    'msub',
-    'msubsup',
-    'msup',
-    'mtable',
-    'mtd',
-    'mtext',
-    'mtr',
-    'munder',
-    'munderover',
-    'semantics'
-  ],
-  // Bug of https://github.com/apostrophecms/sanitize-html/issues/633.
-  // They should not remove `alt=""` even though it is empty.
-  nonBooleanAttributes: []
-});
-
 type RenderInit = Readonly<{
-  codeBlockCopyButtonClassName: string;
   codeBlockCopyButtonTagName: string;
-  codeBlockCopyButtonAltCopied: string;
-  codeBlockCopyButtonAltCopy: string;
   externalLinkAlt: string;
 }>;
 
+const ALLOWED_SCHEMES = ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'];
+
 export default function render(
   markdown: string,
   { markdownRespectCRLF, markdownRenderHTML }: Readonly<{ markdownRespectCRLF: boolean; markdownRenderHTML?: boolean }>,
-  {
-    codeBlockCopyButtonAltCopied,
-    codeBlockCopyButtonAltCopy,
-    codeBlockCopyButtonClassName,
-    codeBlockCopyButtonTagName,
-    externalLinkAlt
-  }: RenderInit
+  { externalLinkAlt }: RenderInit
 ): string {
   const linkDefinitions = Array.from(iterateLinkDefinitions(markdown));
-  const sanitizeHTMLOptions = {
-    ...SANITIZE_HTML_OPTIONS,
-    allowedAttributes: {
-      ...SANITIZE_HTML_OPTIONS.allowedAttributes,
-      [codeBlockCopyButtonTagName]: ['class', 'data-alt-copy', 'data-alt-copied', 'data-testid', 'data-value']
-    },
-    allowedTags: [...SANITIZE_HTML_OPTIONS.allowedTags, codeBlockCopyButtonTagName]
-  };
 
   if (markdownRespectCRLF) {
     markdown = respectCRLFPre(markdown);
@@ -158,7 +57,7 @@ export default function render(
     // eslint-disable-next-line no-script-url
     if (protocol !== 'javascript:') {
       // For links that would be sanitized out, let's turn them into a button so we could handle them later.
-      if (!sanitizeHTMLOptions.allowedSchemes.map(scheme => `${scheme}:`).includes(protocol)) {
+      if (!ALLOWED_SCHEMES.map(scheme => `${scheme}:`).includes(protocol)) {
         decoration.asButton = true;
 
         classes.add('webchat__render-markdown__citation');
@@ -214,16 +113,6 @@ export default function render(
   const documentFragmentAfterMarkdown = parseDocumentFragmentFromString(htmlAfterMarkdown);
 
   betterLinkDocumentMod(documentFragmentAfterMarkdown, decorate);
-  codeBlockCopyButtonDocumentMod(documentFragmentAfterMarkdown, {
-    codeBlockCopyButtonAltCopied,
-    codeBlockCopyButtonAltCopy,
-    codeBlockCopyButtonClassName,
-    codeBlockCopyButtonTagName
-  });
-
-  const htmlAfterBetterLink = serializeDocumentFragmentIntoString(documentFragmentAfterMarkdown);
-
-  const htmlAfterSanitization = sanitizeHTML(htmlAfterBetterLink, sanitizeHTMLOptions);
 
-  return htmlAfterSanitization;
+  return serializeDocumentFragmentIntoString(documentFragmentAfterMarkdown);
 }