Disable child proxying by default and add feature flag scaffolding (#2746)

* Add feature flag for enabling child messaging.

* Add feature flag for disabling child origin response check.

* Exported client functions for using feature flags.

* Added changefile.

* Fix import of resetBuildFeatureFlags

* Export missing objects.

* Added doc for runtime flags.

* Remove export of default feature flags.

* Removed extra import.

* Properly separate tests with child proxying on/off.

* Fix test naming.

Author: juanscr

change/@microsoft-teams-js-e4e92ce6-5c08-405d-9345-a7464db00ecd.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Removed child messaging proxying by default to avoid security issues. If an app still needs this pattern, it can be activated through the feature flag function `activateChildProxyingCommunication` which enables child proxying for that app.",
+  "packageName": "@microsoft/teams-js",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/teams-js/src/internal/childCommunication.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import { getCurrentFeatureFlagsState, isChildProxyingEnabled } from '../public/featureFlags';
 import { UUID as MessageUUID } from '../public/uuidObject';
 import { flushMessageQueue, getMessageIdsAsLogString } from './communicationUtils';
 import { callHandler } from './handlers';
@@ -45,6 +46,9 @@ export function uninitializeChildCommunication(): void {
  * Limited to Microsoft-internal use
  */
 export function shouldEventBeRelayedToChild(): boolean {
+  if (!isChildProxyingEnabled()) {
+    return false;
+  }
   return !!ChildCommunication.window;
 }
 
@@ -63,6 +67,10 @@ type SetCallbackForRequest = (uuid: MessageUUID, callback: Function) => void;
  * Limited to Microsoft-internal use
  */
 export function shouldProcessChildMessage(messageSource: Window, messageOrigin: string): boolean {
+  if (!isChildProxyingEnabled()) {
+    return false;
+  }
+
   if (!ChildCommunication.window || ChildCommunication.window.closed || messageSource === ChildCommunication.window) {
     ChildCommunication.window = messageSource;
     ChildCommunication.origin = messageOrigin;
@@ -157,17 +165,32 @@ function sendChildMessageToParent(
     message.args,
     true, // Tags message as proxied from child
   );
+
+  // Copy variable to new pointer
+  const requestChildWindowOrigin = ChildCommunication.origin;
   setCallbackForRequest(request.uuid, (...args: any[]): void => {
-    if (ChildCommunication.window) {
-      const isPartialResponse = args.pop();
+    if (!ChildCommunication.window) {
+      return;
+    }
+
+    if (
+      !getCurrentFeatureFlagsState().disableEnforceOriginMatchForChildResponses &&
+      requestChildWindowOrigin !== ChildCommunication.origin
+    ) {
       handleIncomingMessageFromChildLogger(
-        'Message from parent being relayed to child, id: %s',
-        getMessageIdsAsLogString(message),
+        'Origin of child window has changed, not sending response back to child window',
       );
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      sendMessageResponseToChild(message.id, message.uuid, args, isPartialResponse);
+      return;
     }
+
+    const isPartialResponse = args.pop();
+    handleIncomingMessageFromChildLogger(
+      'Message from parent being relayed to child, id: %s',
+      getMessageIdsAsLogString(message),
+    );
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    sendMessageResponseToChild(message.id, message.uuid, args, isPartialResponse);
   });
 }
 

packages/teams-js/src/public/featureFlags.ts

@@ -0,0 +1,76 @@
+// All build feature flags are defined inside this object. Any build feature flag must have its own unique getter and setter function. This pattern allows for client apps to treeshake unused code and avoid including code guarded by this feature flags in the final bundle. If this property isn't desired, use the below runtime feature flags object.
+const buildFeatureFlags = {
+  childProxyingCommunication: false,
+};
+
+/**
+ * This function enables child proxying communication for apps that still needs it.
+ *
+ * @deprecated Child proxying is considered an insecure feature and will be removed in future releases.
+ */
+export function activateChildProxyingCommunication(): void {
+  buildFeatureFlags.childProxyingCommunication = true;
+}
+
+/**
+ * @hidden
+ * @internal
+ * Limited to Microsoft-internal use.
+ */
+export function isChildProxyingEnabled(): boolean {
+  return buildFeatureFlags.childProxyingCommunication;
+}
+
+/**
+ * @hidden
+ * @internal
+ * Limited to Microsoft-internal use.
+ */
+export function resetBuildFeatureFlags(): void {
+  buildFeatureFlags.childProxyingCommunication = false;
+}
+
+/**
+ * Feature flags to activate or deactivate certain features at runtime for an app.
+ */
+export interface RuntimeFeatureFlags {
+  /**
+   * Disables origin validation for responses to child windows. When enabled, this flag bypasses security checks that verify the origin of child window that receives the response.
+   *
+   * Default: false
+   */
+  disableEnforceOriginMatchForChildResponses: boolean;
+}
+
+// Default runtime feature flags
+const defaultFeatureFlags: RuntimeFeatureFlags = {
+  disableEnforceOriginMatchForChildResponses: false,
+} as const;
+
+// Object that stores the current runtime feature flag state
+let runtimeFeatureFlags = defaultFeatureFlags;
+
+/**
+ * @returns The current state of the runtime feature flags.
+ */
+export function getCurrentFeatureFlagsState(): RuntimeFeatureFlags {
+  return runtimeFeatureFlags;
+}
+
+/**
+ * It sets the runtime feature flags to the new feature flags provided.
+ * @param featureFlags The new feature flags to set.
+ */
+export function setFeatureFlagsState(featureFlags: RuntimeFeatureFlags): void {
+  runtimeFeatureFlags = featureFlags;
+}
+
+/**
+ * It overwrites all the feature flags in the runtime feature flags object with the new feature flags provided.
+ * @param newFeatureFlags The new feature flags to set.
+ * @returns The current state of the runtime feature flags.
+ */
+export function overwriteFeatureFlagsState(newFeatureFlags: Partial<RuntimeFeatureFlags>): RuntimeFeatureFlags {
+  setFeatureFlagsState({ ...runtimeFeatureFlags, ...newFeatureFlags });
+  return getCurrentFeatureFlagsState();
+}

packages/teams-js/src/public/index.ts

@@ -53,6 +53,13 @@ export * as chat from './chat';
 export { OpenGroupChatRequest, OpenSingleChatRequest } from './chat';
 export * as clipboard from './clipboard';
 export * as dialog from './dialog/dialog';
+export {
+  activateChildProxyingCommunication,
+  getCurrentFeatureFlagsState,
+  overwriteFeatureFlagsState,
+  RuntimeFeatureFlags,
+  setFeatureFlagsState,
+} from './featureFlags';
 export * as nestedAppAuth from './nestedAppAuth';
 export * as geoLocation from './geoLocation/geoLocation';
 export { getAdaptiveCardSchemaVersion } from './adaptiveCards';