@shopgate/engage 7.31.7 → 7.31.8-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.31.7",
+  "version": "7.31.8-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.34",
-    "@shopgate/pwa-common": "7.31.7",
-    "@shopgate/pwa-common-commerce": "7.31.7",
-    "@shopgate/pwa-core": "7.31.7",
-    "@shopgate/pwa-ui-ios": "7.31.7",
-    "@shopgate/pwa-ui-material": "7.31.7",
-    "@shopgate/pwa-ui-shared": "7.31.7",
+    "@shopgate/pwa-common": "7.31.8-beta.1",
+    "@shopgate/pwa-common-commerce": "7.31.8-beta.1",
+    "@shopgate/pwa-core": "7.31.8-beta.1",
+    "@shopgate/pwa-ui-ios": "7.31.8-beta.1",
+    "@shopgate/pwa-ui-material": "7.31.8-beta.1",
+    "@shopgate/pwa-ui-shared": "7.31.8-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/Widgets/constants.js

@@ -1,7 +1,14 @@
 /**
- * List of allowed origins for cms page preview iFrame communication.
+ * List of allowed origin patterns for cms page preview iFrame communication. Incoming messages are
+ * only processed when their origin matches one of these patterns, and outgoing messages are only
+ * posted to origins that matched before.
+ *
+ * A "*" acts as a wildcard for one or more domain labels, so "https://*.shopgate.com" matches
+ * "https://app.shopgate.com" as well as "https://next.us.admin.shopgate.com", but neither
+ * "https://shopgate.com" nor "https://evil.shopgate.com.attacker.example". Every other character
+ * is matched literally, which means that scheme and port always have to match exactly.
  */
-export const ALLOWED_PAGE_PREVIEW_ORIGINS = ['https://next.admin.shopgatedev.com', 'https://next.admin.shopgatepg.com', 'https://next.admin.shopgate.com', 'https://next.us.admin.shopgate.com', 'https://admin-mono.shopgatedev.com', 'https://admin-mono.shopgatepg.com', 'https://admin-mono.shopgate.com', 'https://admin-mono-us.shopgate.com', 'http://localhost.localdev.cc', 'http://localhost:1337'];
+export const ALLOWED_PAGE_PREVIEW_ORIGINS = ['https://*.shopgate.com', 'https://*.shopgatedev.com', 'https://*.shopgatepg.com', 'http://localhost.localdev.cc', 'http://localhost:1337'];
 
 // Whether to consider vertical margins when calculating the overlay position.
 export const CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT = false;

package/page/components/Widgets/helpers.js

@@ -1,4 +1,8 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.replace.js";
+import "core-js/modules/web.url.js";
+import "core-js/modules/web.url.to-json.js";
+import "core-js/modules/web.url-search-params.js";
 import { PAGE_PREVIEW_PATTERN } from '@shopgate/engage/page/constants';
 
 /**
@@ -50,4 +54,62 @@ export function checkScheduled({
     isActive,
     isExpired
   };
-}
+}
+
+/**
+ * Regular expression source that a "*" within an allowed origin pattern is replaced with. It
+ * matches one or more domain labels, but never a dot at the very end, so that the suffix of the
+ * pattern stays anchored to the end of the origin.
+ */
+const ORIGIN_WILDCARD_SOURCE = '(?:[a-zA-Z0-9-]+\\.)*[a-zA-Z0-9-]+';
+
+// Cache for regular expressions that were already created from an origin pattern.
+const originPatternCache = new Map();
+
+/**
+ * Converts an allowed origin pattern into an anchored regular expression. Every character except
+ * the "*" wildcard is matched literally.
+ * @param {string} pattern The origin pattern e.g. "https://*.shopgate.com".
+ * @returns {RegExp} The regular expression for the pattern.
+ */
+const createOriginRegExp = pattern => {
+  const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`^${escaped.split('\\*').join(ORIGIN_WILDCARD_SOURCE)}$`);
+};
+
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns.
+ * @param {string} origin The origin to check e.g. "https://app.shopgate.com".
+ * @param {Array<string>} [patterns] The allowed origin patterns.
+ * @returns {boolean} Whether the origin is allowed.
+ */
+export const isAllowedOrigin = (origin, patterns = []) => {
+  // Opaque origins are serialized as "null" and must never be trusted.
+  if (typeof origin !== 'string' || origin === '' || origin === 'null') {
+    return false;
+  }
+  return patterns.some(pattern => {
+    if (typeof pattern !== 'string' || pattern === '') {
+      return false;
+    }
+    if (!pattern.includes('*')) {
+      return pattern === origin;
+    }
+    if (!originPatternCache.has(pattern)) {
+      originPatternCache.set(pattern, createOriginRegExp(pattern));
+    }
+    return originPatternCache.get(pattern).test(origin);
+  });
+};
+
+/**
+ * Determines the origin of the document that embeds the current page.
+ * @returns {string|null} The referrer origin, or null when it can't be determined.
+ */
+export const getReferrerOrigin = () => {
+  try {
+    return new URL(document.referrer).origin;
+  } catch (e) {
+    return null;
+  }
+};

package/page/components/Widgets/hooks.js

@@ -1,7 +1,3 @@
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/web.url.js";
-import "core-js/modules/web.url.to-json.js";
-import "core-js/modules/web.url-search-params.js";
 import { useEffect, useCallback, useRef, useContext, useMemo } from 'react';
 import { logger } from '@shopgate/engage/core/helpers';
 import { useDispatch } from 'react-redux';
@@ -9,7 +5,7 @@ import { useRoute } from '@shopgate/engage/core/hooks';
 import { receivePageConfigV2 } from '@shopgate/engage/page/action-creators';
 import { PAGE_PREVIEW_SLUG } from '@shopgate/engage/page/constants';
 import { ALLOWED_PAGE_PREVIEW_ORIGINS, CONSIDER_CONTAINER_MARGINS_ON_SCROLL_DEFAULT } from "./constants";
-import { getScrollContainer } from "./helpers";
+import { getScrollContainer, isAllowedOrigin, getReferrerOrigin } from "./helpers";
 import { WidgetsPreviewContext } from "./WidgetsPreviewContext";
 import { dispatchWidgetPreviewEvent, useWidgetPreviewEvent } from "./events";
 
@@ -30,22 +26,26 @@ import { dispatchWidgetPreviewEvent, useWidgetPreviewEvent } from "./events";
 /**
  * Hook for postMessage communication when your component is inside an iframe.
  *
- * Listens on window for "message" events from any origin in parentOrigins,
- * and only calls onMessage(data, rawEvent) if both origin and source match.
+ * Listens on window for "message" events, and only calls onMessage(data, rawEvent) if the origin
+ * of the event is covered by parentOrigins and the message actually came from window.parent.
  *
  * @param {function(MessageData, any): void} onMessage
  *   Callback invoked when a trusted message arrives. Receives data and the
  *   raw event (so you can inspect origin, source, etc.).
  * @param {string[]} parentOrigins
- *   Array of allowed parent origin strings (e.g.
- *   ['https://a.example.com','https://b.example.com']).
+ *   Array of allowed parent origin patterns (e.g.
+ *   ['https://a.example.com','https://*.example.com']). See ALLOWED_PAGE_PREVIEW_ORIGINS for
+ *   details about the supported wildcard syntax.
+ * @param {boolean} [enabled]
+ *   Whether the message listener is supposed to be attached.
  * @returns {IframeMessengerResult}
  *   An object with a single method:
  *   • sendToParent(data, [targetOrigin]): void
  *     – Posts data up to window.parent. By default it uses the most recently
- *       seen origin (from an incoming message). If none, uses parentOrigins[0].
+ *       seen origin (from an incoming message), otherwise the origin of the embedding document.
+ *       Nothing is sent when neither of them is covered by parentOrigins.
  */
-function useIframeMessenger(onMessage, parentOrigins) {
+function useIframeMessenger(onMessage, parentOrigins, enabled = true) {
   // Keep a ref to the latest onMessage callback so the listener always has it.
   const onMessageRef = useRef(onMessage);
   useEffect(() => {
@@ -59,15 +59,15 @@ function useIframeMessenger(onMessage, parentOrigins) {
    * Send a message up to the parent window.
    * @param {MessageData} data       - The data object to post.
    * @param {string}      [targetOrigin]
-   *   Optional override for the origin to post to. Must be one of
-   *   parentOrigins. If omitted, uses the last seen origin (lastOriginRef),
-   *   or parentOrigins[0], or "*" if array is empty.
+   *   Optional override for the origin to post to. Must be covered by parentOrigins. If omitted,
+   *   the last seen origin (lastOriginRef) or the origin of the embedding document is used.
    */
   const sendToParent = useCallback((data, targetOrigin) => {
-    // Determine which origin to use: explicit, then last seen, then first, then "*".
-    const originToUse = typeof targetOrigin === 'string' ? targetOrigin : lastOriginRef.current || new URL(document.referrer).origin || parentOrigins[0] || '*';
+    // Determine which origin to use: explicit, then last seen, then the embedding document.
+    // Patterns are no valid postMessage targets, so an unresolved origin aborts the send.
+    const originToUse = [targetOrigin, lastOriginRef.current, getReferrerOrigin()].find(origin => isAllowedOrigin(origin, parentOrigins));
     if (!originToUse) {
-      logger.warn('useIframeMessenger: no targetOrigin available. ' + 'Provide parentOrigins or pass targetOrigin.');
+      logger.warn('useIframeMessenger: no allowed targetOrigin available. ' + 'Provide parentOrigins or pass an allowed targetOrigin.');
       return;
     }
     window.parent.postMessage(data, originToUse);
@@ -75,13 +75,17 @@ function useIframeMessenger(onMessage, parentOrigins) {
 
   // Attach / detach the "message" listener.
   useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+
     /**
      * Handler for incoming postMessage events.
      * @param {any} rawEvent  – The original MessageEvent object.
      */
     function handler(rawEvent) {
-      // Only proceed if the origin is in our whitelist.
-      if (!parentOrigins.includes(rawEvent.origin)) return;
+      // Only proceed if the origin is covered by our whitelist.
+      if (!isAllowedOrigin(rawEvent.origin, parentOrigins)) return;
       // Ensure the message actually came from window.parent.
       if (rawEvent.source !== window.parent) return;
 
@@ -95,7 +99,7 @@ function useIframeMessenger(onMessage, parentOrigins) {
     return () => {
       window.removeEventListener('message', handler);
     };
-  }, [parentOrigins, sendToParent]);
+  }, [enabled, parentOrigins, sendToParent]);
   return {
     sendToParent
   };
@@ -194,7 +198,7 @@ export const usePreviewIframeCommunication = (isActive = false) => {
         });
       }
     }
-  }, ALLOWED_PAGE_PREVIEW_ORIGINS);
+  }, ALLOWED_PAGE_PREVIEW_ORIGINS, isActive);
   useWidgetPreviewEvent('widget-clicked', e => {
     if (!isActive) {
       return;