botframework-webchat-component 4.13.0 → 4.15.0

package/src/Utils/{AccessibleButton.js → AccessibleButton.tsx}

@@ -1,10 +1,19 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, MouseEventHandler, ReactNode, useRef } from 'react';
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
+type AccessibleButtonProps = {
+  'aria-hidden'?: boolean;
+  children?: ReactNode;
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  type: 'button';
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
 // Differences between <button> and <AccessibleButton>:
 // - Disable behavior
 //   - When the widget is disabled
@@ -23,8 +32,8 @@ const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 //   - aria-disabled="true" is the source of truth
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
-const AccessibleButton = forwardRef(
-  ({ 'aria-hidden': ariaHidden, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
+const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
+  ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
     const targetRef = useRef();
 
     const ref = forwardedRef || targetRef;
@@ -38,13 +47,16 @@ const AccessibleButton = forwardRef(
         tabIndex={disabled ? -1 : tabIndex}
         {...props}
         type="button"
-      />
+      >
+        {children}
+      </button>
     );
   }
 );
 
 AccessibleButton.defaultProps = {
   'aria-hidden': undefined,
+  children: undefined,
   disabled: undefined,
   onClick: undefined,
   tabIndex: undefined
@@ -54,9 +66,12 @@ AccessibleButton.displayName = 'AccessibleButton';
 
 AccessibleButton.propTypes = {
   'aria-hidden': PropTypes.bool,
+  children: PropTypes.any,
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
   tabIndex: PropTypes.number,
+  // TypeScript class is not mappable to PropTypes.oneOf(['button'])
+  // @ts-ignore
   type: PropTypes.oneOf(['button']).isRequired
 };
 

package/src/Utils/{AccessibleInputText.js → AccessibleInputText.tsx}

@@ -1,7 +1,14 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactEventHandler,
+  useRef
+} from 'react';
 
 import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 
@@ -23,9 +30,28 @@ import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 //   - aria-disabled="true" is the source of truth
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
-const AccessibleInputText = forwardRef(
+type AccessibleInputTextProps = {
+  className?: string;
+  disabled?: boolean;
+  enterKeyHint?: string;
+  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLInputElement>;
+  onKeyPress?: KeyboardEventHandler<HTMLInputElement>;
+  onSelect?: ReactEventHandler<HTMLInputElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  tabIndex?: number;
+  type: 'text';
+  value?: string;
+};
+
+const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProps>(
   (
     {
+      className,
       disabled,
       enterKeyHint,
       onChange,
@@ -34,7 +60,10 @@ const AccessibleInputText = forwardRef(
       onKeyDownCapture,
       onKeyPress,
       onSelect,
+      placeholder,
+      readOnly,
       tabIndex,
+      value,
       ...props
     },
     forwardedRef
@@ -48,15 +77,18 @@ const AccessibleInputText = forwardRef(
     return (
       <input
         aria-disabled={disabled || undefined}
+        className={className}
         onChange={disabled ? undefined : onChange}
         onFocus={disabled ? undefined : onFocus}
         onKeyDown={disabled ? undefined : onKeyDown}
         onKeyDownCapture={disabled ? undefined : onKeyDownCapture}
         onKeyPress={disabled ? undefined : onKeyPress}
         onSelect={disabled ? undefined : onSelect}
-        readOnly={disabled}
+        placeholder={placeholder}
+        readOnly={readOnly || disabled}
         ref={ref}
         tabIndex={disabled ? -1 : tabIndex}
+        value={value}
         {...props}
         type="text"
       />
@@ -65,30 +97,41 @@ const AccessibleInputText = forwardRef(
 );
 
 AccessibleInputText.defaultProps = {
+  className: undefined,
   disabled: undefined,
   enterKeyHint: undefined,
+  inputMode: undefined,
   onChange: undefined,
   onFocus: undefined,
   onKeyDown: undefined,
   onKeyDownCapture: undefined,
   onKeyPress: undefined,
   onSelect: undefined,
-  tabIndex: undefined
+  placeholder: undefined,
+  readOnly: undefined,
+  tabIndex: undefined,
+  value: undefined
 };
 
 AccessibleInputText.displayName = 'AccessibleInputText';
 
 AccessibleInputText.propTypes = {
+  className: PropTypes.string,
   disabled: PropTypes.bool,
   enterKeyHint: PropTypes.string,
+  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyDownCapture: PropTypes.func,
   onKeyPress: PropTypes.func,
   onSelect: PropTypes.func,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
   tabIndex: PropTypes.number,
-  type: PropTypes.oneOf(['text']).isRequired
+  // @ts-ignore PropTypes and TypeScript type do not well understood each other.
+  type: PropTypes.oneOf(['text']).isRequired,
+  value: PropTypes.string
 };
 
 export default AccessibleInputText;

package/src/Utils/{AccessibleTextArea.js → AccessibleTextArea.tsx}

@@ -1,7 +1,14 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1] }] */
 
 import PropTypes from 'prop-types';
-import React, { forwardRef, useRef } from 'react';
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  KeyboardEventHandler,
+  ReactEventHandler,
+  useRef
+} from 'react';
 
 // Differences between <textarea> and <AccessibleTextArea>:
 // - Disable behavior
@@ -21,8 +28,43 @@ import React, { forwardRef, useRef } from 'react';
 //   - aria-disabled="true" is the source of truth
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
-const AccessibleTextArea = forwardRef(
-  ({ disabled, onChange, onFocus, onKeyDown, onKeyPress, onSelect, tabIndex, ...props }, forwardedRef) => {
+type AccessibleTextAreaProps = {
+  className?: string;
+  disabled?: boolean;
+  inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onKeyDownCapture?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onKeyPress?: KeyboardEventHandler<HTMLTextAreaElement>;
+  onSelect?: ReactEventHandler<HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  rows?: number;
+  tabIndex?: number;
+  value?: string;
+};
+
+const AccessibleTextArea = forwardRef<HTMLTextAreaElement, AccessibleTextAreaProps>(
+  (
+    {
+      className,
+      disabled,
+      inputMode,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onKeyDownCapture,
+      onKeyPress,
+      onSelect,
+      placeholder,
+      readOnly,
+      rows,
+      tabIndex,
+      ...props
+    },
+    forwardedRef
+  ) => {
     const targetRef = useRef();
 
     const ref = forwardedRef || targetRef;
@@ -30,13 +72,18 @@ const AccessibleTextArea = forwardRef(
     return (
       <textarea
         aria-disabled={disabled || undefined}
+        className={className}
+        inputMode={inputMode}
         onChange={disabled ? undefined : onChange}
         onFocus={disabled ? undefined : onFocus}
         onKeyDown={disabled ? undefined : onKeyDown}
+        onKeyDownCapture={disabled ? undefined : onKeyDownCapture}
         onKeyPress={disabled ? undefined : onKeyPress}
         onSelect={disabled ? undefined : onSelect}
-        readOnly={disabled}
+        placeholder={placeholder}
+        readOnly={readOnly || disabled}
         ref={ref}
+        rows={rows}
         tabIndex={disabled ? -1 : tabIndex}
         {...props}
       />
@@ -45,25 +92,39 @@ const AccessibleTextArea = forwardRef(
 );
 
 AccessibleTextArea.defaultProps = {
+  className: undefined,
   disabled: undefined,
+  inputMode: undefined,
   onChange: undefined,
   onFocus: undefined,
   onKeyDown: undefined,
+  onKeyDownCapture: undefined,
   onKeyPress: undefined,
   onSelect: undefined,
-  tabIndex: undefined
+  placeholder: undefined,
+  readOnly: undefined,
+  rows: undefined,
+  tabIndex: undefined,
+  value: undefined
 };
 
 AccessibleTextArea.displayName = 'AccessibleTextArea';
 
 AccessibleTextArea.propTypes = {
+  className: PropTypes.string,
   disabled: PropTypes.bool,
+  inputMode: PropTypes.oneOf(['text', 'none', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
+  onKeyDownCapture: PropTypes.func,
   onKeyPress: PropTypes.func,
   onSelect: PropTypes.func,
-  tabIndex: PropTypes.number
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  rows: PropTypes.number,
+  tabIndex: PropTypes.number,
+  value: PropTypes.string
 };
 
 export default AccessibleTextArea;

package/src/Utils/{FocusRedirector.js → FocusRedirector.tsx}

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 
+import type { FC, MutableRefObject } from 'react';
+
 // This is an element, when focused, will send the focus to the ref specified in "redirectRef".
 // Although the focus is being redirected, browser will scroll this redirector element into view.
 
@@ -10,28 +12,39 @@ import React, { useCallback } from 'react';
 // When this focus redirector is put inside a scrollable container, you may want to resize or reposition
 // it to prevent unintentional scroll done by the browser default behavior.
 
-const FocusRedirector = ({ className, onFocus, redirectRef }) => {
-  const handleFocus = useCallback(() => {
-    const { current } = redirectRef;
+type FocusRedirectorProps = {
+  className?: string;
+  onFocus?: () => void;
+  redirectRef?: MutableRefObject<HTMLElement>;
+};
 
-    current && current.focus();
+const FocusRedirector: FC<FocusRedirectorProps> = ({ className, onFocus, redirectRef }) => {
+  const handleFocus = useCallback(() => {
+    redirectRef?.current?.focus();
     onFocus && onFocus();
   }, [onFocus, redirectRef]);
 
-  return <div className={className} onFocus={handleFocus} tabIndex={0} />;
+  // For NVDA, we should set aria-hidden="true".
+  // When using NVDA in browse mode, press up/down arrow keys will focus on this redirector.
+  // This redirector is designed to capture TAB only and should not react on browse mode.
+  // However, reacting with browse mode is currently okay. Just better to leave it alone.
+  return <div aria-hidden="true" className={className} onFocus={handleFocus} tabIndex={0} />;
 };
 
 FocusRedirector.defaultProps = {
   className: undefined,
-  onFocus: undefined
+  onFocus: undefined,
+  redirectRef: undefined
 };
 
 FocusRedirector.propTypes = {
   className: PropTypes.string,
   onFocus: PropTypes.func,
+  // PropTypes is not fully compatible with TypeScript.
+  // @ts-ignore
   redirectRef: PropTypes.shape({
-    current: PropTypes.any
-  }).isRequired
+    current: PropTypes.instanceOf(HTMLElement)
+  })
 };
 
 export default FocusRedirector;

package/src/Utils/InlineMarkdown.js

@@ -1,6 +1,7 @@
 /* eslint react/no-danger: "off" */
 
 import { hooks } from 'botframework-webchat-api';
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo } from 'react';
 import updateIn from 'simple-update-in';
@@ -89,7 +90,13 @@ const InlineMarkdown = ({ children, onReference, references }) => {
 
   const html = useMemo(() => {
     const tree = markdownIt.parseInline(children, {
-      references: references.reduce((references, key) => ({ ...references, [key]: { href: `#${refToHref[key]}` } }), {})
+      references: references.reduce(
+        (references, key) =>
+          // Mitigated through denylisting.
+          // eslint-disable-next-line security/detect-object-injection
+          isForbiddenPropertyName(key) ? references : { ...references, [key]: { href: `#${refToHref[key]}` } },
+        {}
+      )
     });
 
     // Turn "<a href="#retry">Retry</a>" into "<button data-ref="retry" type="button">Retry</button>"
@@ -104,7 +111,16 @@ const InlineMarkdown = ({ children, onReference, references }) => {
 
       const href = event.target.getAttribute('data-markdown-href');
 
-      href && onReference && onReference(createCustomEvent('reference', { data: hrefToRef[href] }));
+      href &&
+        onReference &&
+        onReference(
+          createCustomEvent(
+            'reference',
+            // Mitigated through denylisting.
+            // eslint-disable-next-line security/detect-object-injection
+            isForbiddenPropertyName(href) ? {} : { data: hrefToRef[href] }
+          )
+        );
     },
     [hrefToRef, onReference]
   );

package/src/Utils/TypeFocusSink/FocusBox.js

@@ -12,10 +12,10 @@ const DEFAULT_STYLE = { outline: 0 };
 
 const BaseFocusBox = ({ children, disabled, onKeyDownCapture, sendFocusRef: sendFocusRefProp, ...otherProps }, ref) => {
   const sendFocusRefPersist = useRef(null);
-  const patchedSendFocusRef = useMemo(() => sendFocusRefProp || sendFocusRefPersist, [
-    sendFocusRefPersist,
-    sendFocusRefProp
-  ]);
+  const patchedSendFocusRef = useMemo(
+    () => sendFocusRefProp || sendFocusRefPersist,
+    [sendFocusRefPersist, sendFocusRefProp]
+  );
 
   const context = useMemo(
     () => ({

package/src/Utils/TypeFocusSink/getTabIndex.ts

@@ -19,7 +19,7 @@ const IE_FOCUSABLE_LIST = [
 const IS_FIREFOX = /Firefox\//iu.test(userAgent);
 const IS_IE = /Trident\//iu.test(userAgent);
 
-export default function getTabIndex(element) {
+export default function getTabIndex(element: HTMLElement): number | null {
   const { tabIndex } = element;
 
   if (IS_IE) {

package/src/Utils/TypeFocusSink/inputtableKey.ts

@@ -10,6 +10,10 @@ const INPUTTABLE_KEY = {
   Subtract: '-' // Numpad subtract key
 };
 
+const INPUTTABLE_KEY_KEYS = Object.keys(INPUTTABLE_KEY);
+
 export default function inputtableKey(key) {
-  return key.length === 1 ? key : INPUTTABLE_KEY[key];
+  // Mitigated through allowlisting.
+  // eslint-disable-next-line security/detect-object-injection
+  return key.length === 1 ? key : INPUTTABLE_KEY_KEYS.includes(key) ? INPUTTABLE_KEY[key] : undefined;
 }

package/src/Utils/activityAltText.ts

@@ -0,0 +1,135 @@
+import textFormatToContentType from './textFormatToContentType';
+
+function walk<T extends Node>(document: Document, walker: (node: T) => string[]): string[] {
+  const nodes: T[] = [].slice.call(document.childNodes);
+  const results: string[] = [];
+
+  while (nodes.length) {
+    const node = nodes.shift();
+    const { childNodes } = node;
+
+    results.push(...(walker(node) || []));
+    nodes.unshift(...[].slice.call(childNodes));
+  }
+
+  return results;
+}
+
+// From https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
+const HTML_INLINE_TAGS = [
+  'A',
+  'ABBR',
+  'ACRONYM',
+  'AUDIO',
+  'B',
+  'BDI',
+  'BDO',
+  'BIG',
+  'BR',
+  'BUTTON',
+  'CANVAS',
+  'CITE',
+  'CODE',
+  'DATA',
+  'DATALIST',
+  'DEL',
+  'DFN',
+  'EM',
+  'EMBED',
+  'I',
+  'IFRAME',
+  'IMG',
+  'INPUT',
+  'INS',
+  'KBD',
+  'LABEL',
+  'MAP',
+  'MARK',
+  'METER',
+  'NOSCRIPT',
+  'OBJECT',
+  'OUTPUT',
+  'PICTURE',
+  'PROGRESS',
+  'Q',
+  'RUBY',
+  'S',
+  'SAMP',
+  'SCRIPT',
+  'SELECT',
+  'SLOT',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'SVG',
+  'TEMPLATE',
+  'TEXTAREA',
+  'TIME',
+  'U',
+  'TT',
+  'VAR',
+  'VIDEO',
+  'WBR'
+];
+
+/**
+ * Computes all text from a given HTML document as flattened array. This is best-effort.
+ *
+ * @param {Document} document - HTML document to computes texts from.
+ */
+function htmlTextAlternatives(document: Document): string[] {
+  // TODO: [P2] #3923 Revisit this logic with W3C standard, we could do a better text alternatives computation.
+  //       For example, <abbr title="..."> is not computed.
+  //       https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_name
+  return walk<HTMLElement>(document, node => {
+    const { nodeType, tagName, textContent } = node;
+
+    if (nodeType === Node.TEXT_NODE) {
+      return [textContent];
+    } else if (tagName === 'IMG') {
+      return [node.getAttribute('alt')];
+    } else if (!HTML_INLINE_TAGS.includes(tagName)) {
+      return ['\n'];
+    }
+  });
+}
+
+/**
+ * Returns the text alternatives for a message activity.
+ *
+ * @param {object} activity - Activity to compute the text alternatives.
+ * @param {function} renderMarkdownAsHTML - Callback function to render Markdown as HTML string.
+ */
+export default function activityAltText(
+  activity: any,
+  renderMarkdownAsHTML?: (markdown: string) => string
+): false | string {
+  if (activity.type !== 'message') {
+    return false;
+  }
+
+  const fallbackText = activity?.channelData?.['webchat:fallback-text'];
+
+  if (typeof fallbackText === 'string') {
+    // If `fallbackText` is an empty string, we will treat the activity as presentational and skip narrating it (return false).
+    return fallbackText || false;
+  }
+
+  const text = activity?.channelData?.messageBack?.displayText || activity.text;
+
+  if (!text) {
+    // We will continue to narrate the activity, as empty.
+    return '';
+  }
+
+  if (renderMarkdownAsHTML && textFormatToContentType(activity.textFormat) === 'text/markdown') {
+    return htmlTextAlternatives(new DOMParser().parseFromString(renderMarkdownAsHTML(text), 'text/html'))
+      .join('')
+      .replace(/\n{2,}/gu, '\n')
+      .trim();
+  }
+
+  return text;
+}

package/src/Utils/createCustomEvent.js

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function createCustomEvent(name, eventInitDict) {
   let event;
 
@@ -10,7 +12,11 @@ export default function createCustomEvent(name, eventInitDict) {
   }
 
   Object.entries(eventInitDict).forEach(([key, value]) => {
-    event[key] = value;
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      event[key] = value;
+    }
   });
 
   return event;

package/src/Utils/detectBrowser.js

@@ -1,6 +1,7 @@
 const { userAgent } = navigator;
 
 // not DRY so that list can be alphabetical
+const android = /Linux; Android/u.test(userAgent);
 const chromium = !/Edge\//u.test(userAgent) && /Chrome\//u.test(userAgent);
 const edgeAnaheim = /Edg\//u.test(userAgent);
 const edgeUWP = /Edge\//u.test(userAgent);
@@ -10,4 +11,4 @@ const ie11 = /Trident\/7.0/u.test(userAgent);
 const chrome = chromium && !edgeAnaheim;
 const safari = !(chrome || edgeUWP || ie11 || firefox);
 
-export { chrome, chromium, edgeAnaheim, edgeUWP, firefox, ie11, safari };
+export { android, chrome, chromium, edgeAnaheim, edgeUWP, firefox, ie11, safari };

package/src/Utils/findAncestor.ts

@@ -0,0 +1,12 @@
+export default function findAncestor(
+  node: HTMLElement,
+  predicate: (ancestor: HTMLElement) => boolean
+): HTMLElement | undefined {
+  let ancestor = node;
+
+  while ((ancestor = ancestor.parentElement)) {
+    if (predicate(ancestor)) {
+      return ancestor;
+    }
+  }
+}

package/src/Utils/getActivityUniqueId.ts

@@ -0,0 +1,5 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
+
+export default function getActivityUniqueId(activity: DirectLineActivity): string {
+  return activity?.channelData?.clientActivityID || activity?.id;
+}

package/src/Utils/intersectionOf.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import intersectionOf from './intersectionOf';
 
 test('intersection of [1, 2, 3] and [3, 4, 5] should return [3]', () => {

package/src/Utils/intersectionOf.ts

@@ -0,0 +1,14 @@
+/**
+ * Intersects 2 or more arrays and return an array of values which are common to all of them.
+ */
+export default function intersectionOf<T>(arg0: readonly T[], ...args: readonly (readonly T[])[]): T[] {
+  return args.reduce<T[]>(
+    (interim: T[], arg: readonly T[]) =>
+      interim.reduce((intersection: T[], item: T) => {
+        arg.includes(item) && intersection.push(item);
+
+        return intersection;
+      }, []),
+    [...arg0]
+  );
+}

package/src/Utils/isZeroOrPositive.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns `true`, if the number is zero or positive, otherwise, `false`, including minus zeroes.
+ */
+export default function isZeroOrPositive(value: number): boolean {
+  // This will handle minus-zero.
+  return 1 / value >= 0;
+}

package/src/Utils/mapMap.js

@@ -1,6 +1,12 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function mapMap(map, mapper) {
   return Object.entries(map).reduce((result, [key, value]) => {
-    result[key] = mapper(value, key);
+    if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      result[key] = mapper(value, key);
+    }
 
     return result;
   }, {});