@shopgate/engage 7.32.0-beta.12 → 7.32.0-beta.14

package/admin-preview/constants/index.d.ts

@@ -1,6 +1,14 @@
 export declare const PAGE_PREVIEW_PATTERN = "/shopgate-internal-page-preview";
 /**
- * List of allowed origins for cms page preview iFrame communication.
+ * List of allowed origin patterns for admin preview iFrame communication. Both directions are
+ * validated against these patterns: incoming messages are only processed when their origin matches,
+ * and outgoing messages are only posted to a matching origin - either the origin of the last
+ * accepted incoming message, or the origin of the embedding document.
+ *
+ * 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 declare const ALLOWED_ADMIN_PREVIEW_ORIGINS: string[];
 //# sourceMappingURL=index.d.ts.map

package/admin-preview/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,oCAAoC,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,6BAA6B,UAMzC,CAAC"}

package/admin-preview/constants/index.js

@@ -1,6 +1,14 @@
 export const PAGE_PREVIEW_PATTERN = '/shopgate-internal-page-preview';
 
 /**
- * List of allowed origins for cms page preview iFrame communication.
+ * List of allowed origin patterns for admin preview iFrame communication. Both directions are
+ * validated against these patterns: incoming messages are only processed when their origin matches,
+ * and outgoing messages are only posted to a matching origin - either the origin of the last
+ * accepted incoming message, or the origin of the embedding document.
+ *
+ * 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_ADMIN_PREVIEW_ORIGINS = ['https://next.admin.shopgatedev.com', 'https://next.admin.shopgatepg.com', 'https://next.admin.shopgate.com', 'https://next.us.admin.shopgate.com', 'http://localhost:1337'];
+export const ALLOWED_ADMIN_PREVIEW_ORIGINS = ['https://*.shopgate.com', 'https://*.shopgatedev.com', 'https://*.shopgatepg.com', 'http://localhost.localdev.cc', 'http://localhost:1337'];

package/admin-preview/helpers/_internal/origins.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAllowedOrigin / getReferrerOrigin helpers from @shopgate/engage/admin-preview/helpers
+ * instead.
+ */
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export declare const matchesAllowedOrigin: (origin: string | null | undefined, patterns?: string[]) => origin is string;
+/**
+ * Determines the origin of the document that embeds the current page. Since allowed origins can be
+ * patterns, and patterns are no valid postMessage targets, this is the only way to address a parent
+ * that has not sent a message yet.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export declare const readReferrerOrigin: () => string | null;
+//# sourceMappingURL=origins.d.ts.map

package/admin-preview/helpers/_internal/origins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"origins.d.ts","sourceRoot":"","sources":["../../../../admin-preview/helpers/_internal/origins.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAwBH;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,WAAU,MAAM,EAAO,KACtB,MAAM,IAAI,MAwBZ,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,QAAO,MAAM,GAAG,IAM9C,CAAC"}

package/admin-preview/helpers/_internal/origins.js

@@ -0,0 +1,72 @@
+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";
+/**
+ * Internal to the admin-preview package - do not import this module from anywhere else. Consume
+ * the isAllowedOrigin / getReferrerOrigin helpers from @shopgate/engage/admin-preview/helpers
+ * instead.
+ */
+
+/**
+ * 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 pattern The origin pattern e.g. "https://*.shopgate.com".
+ * @returns 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 origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export const matchesAllowedOrigin = (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;
+    }
+    let regExp = originPatternCache.get(pattern);
+    if (!regExp) {
+      regExp = createOriginRegExp(pattern);
+      originPatternCache.set(pattern, regExp);
+    }
+    return regExp.test(origin);
+  });
+};
+
+/**
+ * Determines the origin of the document that embeds the current page. Since allowed origins can be
+ * patterns, and patterns are no valid postMessage targets, this is the only way to address a parent
+ * that has not sent a message yet.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export const readReferrerOrigin = () => {
+  try {
+    return new URL(document.referrer).origin;
+  } catch (e) {
+    return null;
+  }
+};

package/admin-preview/helpers/index.d.ts

@@ -20,4 +20,17 @@ export declare const isFrontendSettingsAdminPreviewActive: () => boolean;
  * @returns True if the app must not navigate, false otherwise.
  */
 export declare const isNavigationBlocked: () => boolean;
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns. See
+ * ALLOWED_ADMIN_PREVIEW_ORIGINS for details about the supported wildcard syntax.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export declare const isAllowedOrigin: (origin: string | null | undefined, patterns?: string[]) => origin is string;
+/**
+ * Determines the origin of the document that embeds the current page.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export declare const getReferrerOrigin: () => string | null;
 //# sourceMappingURL=index.d.ts.map

package/admin-preview/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAO,OACX,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/helpers/index.ts"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,QAAO,OAClB,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAO,OAClB,CAAC;AAE3B;;;GAGG;AACH,eAAO,MAAM,oCAAoC,QAAO,OAClB,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAO,OACX,CAAC;AAE7B;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,WAAU,MAAM,EAAO,KACtB,MAAM,IAAI,MAAgD,CAAC;AAE9D;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO,MAAM,GAAG,IAA4B,CAAC"}

package/admin-preview/helpers/index.js

@@ -1,4 +1,5 @@
 import { detectAdminPreview, detectFrontendSettingsAdminPreview, detectPageAdminPreview } from "./_internal/detection";
+import { matchesAllowedOrigin, readReferrerOrigin } from "./_internal/origins";
 
 /**
  * Checks if the app is currently in admin preview mode (pages or frontend settings).
@@ -24,4 +25,19 @@ export const isFrontendSettingsAdminPreviewActive = () => detectFrontendSettings
  * Frontend settings preview is not affected - it previews styling on the regular app.
  * @returns True if the app must not navigate, false otherwise.
  */
-export const isNavigationBlocked = () => isPageAdminPreviewActive();
+export const isNavigationBlocked = () => isPageAdminPreviewActive();
+
+/**
+ * Checks if an origin is covered by a list of allowed origin patterns. See
+ * ALLOWED_ADMIN_PREVIEW_ORIGINS for details about the supported wildcard syntax.
+ * @param origin The origin to check e.g. "https://app.shopgate.com".
+ * @param patterns The allowed origin patterns.
+ * @returns Whether the origin is allowed.
+ */
+export const isAllowedOrigin = (origin, patterns = []) => matchesAllowedOrigin(origin, patterns);
+
+/**
+ * Determines the origin of the document that embeds the current page.
+ * @returns The referrer origin, or null when it can't be determined.
+ */
+export const getReferrerOrigin = () => readReferrerOrigin();

package/admin-preview/hooks/index.d.ts

@@ -13,24 +13,26 @@ export interface IframeMessengerResult<TMessage extends MessageData = MessageDat
     /**
      * Send data up to window.parent.
      * If targetOrigin is omitted, uses the most recently seen origin
-     * (from an incoming message). If none was seen yet, falls back to
-     * the origin derived from document.referrer, then parentOrigins[0], then "*".
+     * (from an incoming message), otherwise the origin derived from document.referrer.
+     * Nothing is sent when neither of them is covered by parentOrigins.
      */
     sendToParent: (data: TMessage, targetOrigin?: string) => void;
 }
 /**
  * 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 came from window.parent.
  *
  * @param onMessage Callback invoked when a trusted message arrives.
  * Receives data and the raw event so consumers can inspect origin, source,
  * and other metadata when needed.
- * @param parentOrigins Array of allowed parent origin strings, e.g.
- * ['https://a.example.com', 'https://b.example.com'].
+ * @param parentOrigins Array of allowed parent origin patterns, e.g.
+ * ['https://a.example.com', 'https://*.example.com']. See ALLOWED_ADMIN_PREVIEW_ORIGINS for
+ * details about the supported wildcard syntax.
+ * @param enabled Whether the message listener is supposed to be attached.
  * @returns An object with a single method:
  * sendToParent(data, [targetOrigin]) to post data to the parent window.
  */
-export declare function useIframeMessenger<TMessage extends MessageData = MessageData>(onMessage: OnIframeMessage<TMessage>, parentOrigins: string[]): IframeMessengerResult<TMessage>;
+export declare function useIframeMessenger<TMessage extends MessageData = MessageData>(onMessage: OnIframeMessage<TMessage>, parentOrigins: string[], enabled?: boolean): IframeMessengerResult<TMessage>;
 //# sourceMappingURL=index.d.ts.map

package/admin-preview/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/hooks/index.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,IAAI,CACxE,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,qBAAqB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW;IAC/E;;;;;OAKG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,EAC3E,SAAS,EAAE,eAAe,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,EAAE,GACtB,qBAAqB,CAAC,QAAQ,CAAC,CAmEjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../admin-preview/hooks/index.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,IAAI,CACxE,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,KAC7B,IAAI,CAAC;AAEV,MAAM,WAAW,qBAAqB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW;IAC/E;;;;;OAKG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,WAAW,GAAG,WAAW,EAC3E,SAAS,EAAE,eAAe,CAAC,QAAQ,CAAC,EACpC,aAAa,EAAE,MAAM,EAAE,EACvB,OAAO,UAAO,GACb,qBAAqB,CAAC,QAAQ,CAAC,CAkEjC"}

package/admin-preview/hooks/index.js

@@ -1,24 +1,23 @@
-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 { useCallback, useEffect, useRef } from 'react';
 import { logger } from '@shopgate/engage/core/helpers';
+import { getReferrerOrigin, isAllowedOrigin } from "../helpers";
 /**
  * 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 came from window.parent.
  *
  * @param onMessage Callback invoked when a trusted message arrives.
  * Receives data and the raw event so consumers can inspect origin, source,
  * and other metadata when needed.
- * @param parentOrigins Array of allowed parent origin strings, e.g.
- * ['https://a.example.com', 'https://b.example.com'].
+ * @param parentOrigins Array of allowed parent origin patterns, e.g.
+ * ['https://a.example.com', 'https://*.example.com']. See ALLOWED_ADMIN_PREVIEW_ORIGINS for
+ * details about the supported wildcard syntax.
+ * @param enabled Whether the message listener is supposed to be attached.
  * @returns An object with a single method:
  * sendToParent(data, [targetOrigin]) to post data to the parent window.
  */
-export function useIframeMessenger(onMessage, parentOrigins) {
+export 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(() => {
@@ -31,15 +30,15 @@ export function useIframeMessenger(onMessage, parentOrigins) {
   /**
    * Send a message up to the parent window.
    * @param data - The data object to post.
-   * @param targetOrigin Optional override for the origin to post to.
-   * If omitted, uses the last seen origin, then referrer origin,
-   * then parentOrigins[0], then "*".
+   * @param targetOrigin Optional override for the origin to post to. Must be covered by
+   * parentOrigins. If omitted, uses the last seen origin, then the referrer origin.
    */
   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 ?? (document.referrer ? new URL(document.referrer).origin : undefined) ?? 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);
@@ -47,13 +46,17 @@ export function useIframeMessenger(onMessage, parentOrigins) {
 
   // Attach / detach the "message" listener.
   useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+
     /**
      * Handler for incoming postMessage events.
      * @param 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;
 
@@ -67,7 +70,7 @@ export function useIframeMessenger(onMessage, parentOrigins) {
     return () => {
       window.removeEventListener('message', handler);
     };
-  }, [parentOrigins, sendToParent]);
+  }, [enabled, parentOrigins]);
   return {
     sendToParent
   };

package/admin-preview/initialization/awaitInitialFrontendSettings.d.ts

@@ -8,9 +8,10 @@ interface PreviewStore {
  * listener only mounts once React committed, so everything the admin sent before that is dropped
  * and the styling arrives as a visible restyle.
  *
- * The handshake goes to every allowed origin rather than to a single guessed one. Nothing has been
- * received at this point, so there is no known parent origin, and the referrer is not guaranteed to
- * survive the admin's referrer policy. The browser drops the copies whose target does not match.
+ * The handshake goes to the origin of the embedding document. Nothing has been received at this
+ * point, so that referrer is the only concrete parent origin available - the allow list holds
+ * patterns, and a pattern is no valid postMessage target. An admin that strips its referrer
+ * therefore gets no ready message, and the app falls back to the timeout below.
  *
  * Resolves when the payload arrived or when REQUEST_TIMEOUT elapsed, and never rejects - an admin
  * that stays silent has to fall back to the unstyled app, never to an iframe that never renders.

package/admin-preview/initialization/awaitInitialFrontendSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"awaitInitialFrontendSettings.d.ts","sourceRoot":"","sources":["../../../admin-preview/initialization/awaitInitialFrontendSettings.ts"],"names":[],"mappings":"AAmBA,UAAU,YAAY;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,4BAA4B,GAAI,OAAO,YAAY,KAAG,OAAO,CAAC,IAAI,CAqE3E,CAAC"}
+{"version":3,"file":"awaitInitialFrontendSettings.d.ts","sourceRoot":"","sources":["../../../admin-preview/initialization/awaitInitialFrontendSettings.ts"],"names":[],"mappings":"AAuBA,UAAU,YAAY;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,4BAA4B,GAAI,OAAO,YAAY,KAAG,OAAO,CAAC,IAAI,CAyE3E,CAAC"}

package/admin-preview/initialization/awaitInitialFrontendSettings.js

@@ -1,7 +1,6 @@
-import "core-js/modules/es.array.includes.js";
 import { withScope, captureMessage, Severity as SentrySeverity } from '@sentry/browser';
 import { receiveAppSettings } from '@shopgate/engage/settings/action-creators/appSettings';
-import { isFrontendSettingsAdminPreviewActive } from "../helpers";
+import { getReferrerOrigin, isAllowedOrigin, isFrontendSettingsAdminPreviewActive } from "../helpers";
 import { ALLOWED_ADMIN_PREVIEW_ORIGINS } from "../constants";
 import { getOrCreateStyleTag, serializeStyling } from "../components/FrontendSettingsPreviewBridge/helpers";
 import { setInitialFrontendSettings } from "./_internal/initialFrontendSettings";
@@ -13,9 +12,10 @@ const REQUEST_TIMEOUT = 3000;
  * listener only mounts once React committed, so everything the admin sent before that is dropped
  * and the styling arrives as a visible restyle.
  *
- * The handshake goes to every allowed origin rather than to a single guessed one. Nothing has been
- * received at this point, so there is no known parent origin, and the referrer is not guaranteed to
- * survive the admin's referrer policy. The browser drops the copies whose target does not match.
+ * The handshake goes to the origin of the embedding document. Nothing has been received at this
+ * point, so that referrer is the only concrete parent origin available - the allow list holds
+ * patterns, and a pattern is no valid postMessage target. An admin that strips its referrer
+ * therefore gets no ready message, and the app falls back to the timeout below.
  *
  * Resolves when the payload arrived or when REQUEST_TIMEOUT elapsed, and never rejects - an admin
  * that stays silent has to fall back to the unstyled app, never to an iframe that never renders.
@@ -51,7 +51,7 @@ export const awaitInitialFrontendSettings = store => new Promise(resolve => {
    * @param event The message event.
    */
   function handleMessage(event) {
-    if (!ALLOWED_ADMIN_PREVIEW_ORIGINS.includes(event.origin)) return;
+    if (!isAllowedOrigin(event.origin, ALLOWED_ADMIN_PREVIEW_ORIGINS)) return;
     if (event.source !== window.parent) return;
     const {
       data
@@ -76,9 +76,13 @@ export const awaitInitialFrontendSettings = store => new Promise(resolve => {
     });
     settle();
   }, REQUEST_TIMEOUT);
-  ALLOWED_ADMIN_PREVIEW_ORIGINS.forEach(origin => {
+
+  // Allowed origins can be patterns, which are no valid postMessage targets, so the ready
+  // message goes to the document that embedded us - as long as it is an allowed origin.
+  const parentOrigin = getReferrerOrigin();
+  if (isAllowedOrigin(parentOrigin, ALLOWED_ADMIN_PREVIEW_ORIGINS)) {
     window.parent.postMessage({
       type: 'frontendSettingsPreviewReady'
-    }, origin);
-  });
+    }, parentOrigin);
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.12",
+  "version": "7.32.0-beta.14",
   "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.32.0-beta.12",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.12",
-    "@shopgate/pwa-core": "7.32.0-beta.12",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.12",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.12",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.12",
+    "@shopgate/pwa-common": "7.32.0-beta.14",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.14",
+    "@shopgate/pwa-core": "7.32.0-beta.14",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.14",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.14",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.14",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/Widgets/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,yBAAyB,CAAC;AAoBjC;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,kBAAgB,SAyG7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,yBAA8D,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,yBAAyB,CAAC;AAoBjC;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,kBAAgB,SA8G7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,yBAA8D,CAAC"}

package/page/components/Widgets/hooks.js

@@ -36,6 +36,10 @@ export const usePreviewIframeCommunication = (isActive = false) => {
   const {
     sendToParent
   } = useIframeMessenger(data => {
+    // Allowed parents can also emit unrelated messages with arbitrary payloads.
+    if (typeof data !== 'object' || data === null) {
+      return;
+    }
     if (data.type === 'receivePageConfig') {
       // Page preview config received from the parent window.
       dispatch(receivePageConfigV2({
@@ -110,7 +114,7 @@ export const usePreviewIframeCommunication = (isActive = false) => {
         });
       }
     }
-  }, ALLOWED_ADMIN_PREVIEW_ORIGINS);
+  }, ALLOWED_ADMIN_PREVIEW_ORIGINS, isActive);
   useWidgetPreviewEvent('widget-clicked', e => {
     if (!isActive) {
       return;