iframe-pubsub 1.0.21 → 1.0.24

package/dist/index.d.mts

@@ -26,8 +26,9 @@ declare class Client {
     protected targetAIChatClientId: string;
     private pageId;
     private callback?;
-    private pubsub;
+    private pubsub?;
     private isIframe;
+    private isMainApp;
     private boundHandleMessage;
     /**
      * Create a new client instance.
@@ -39,11 +40,6 @@ declare class Client {
      * Unregister the client from the pubsub.
      */
     unregister(): void;
-    /**
-     * Clean up the aichat registration if the iframe is removed.
-     *
-     * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-     */
     cleanAIChat(): boolean;
     /**
      * Listen for messages from the parent page with a callback.
@@ -74,10 +70,15 @@ declare class Client {
      * @param clientId The ID of the client to check.
      * @param retryCount The current retry count.
      * @returns A Promise that resolves to true if the client exists, false otherwise.
-     * @private
      */
     private checkClientExistsWithRetry;
     private handleMessage;
+    getDebugInfo(): {
+        pageId: string;
+        isMainApp: boolean;
+        isIframe: boolean;
+        windowLevel: string;
+    };
 }
 
 declare enum AIChatNameEnum {

package/dist/index.d.ts

@@ -26,8 +26,9 @@ declare class Client {
     protected targetAIChatClientId: string;
     private pageId;
     private callback?;
-    private pubsub;
+    private pubsub?;
     private isIframe;
+    private isMainApp;
     private boundHandleMessage;
     /**
      * Create a new client instance.
@@ -39,11 +40,6 @@ declare class Client {
      * Unregister the client from the pubsub.
      */
     unregister(): void;
-    /**
-     * Clean up the aichat registration if the iframe is removed.
-     *
-     * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-     */
     cleanAIChat(): boolean;
     /**
      * Listen for messages from the parent page with a callback.
@@ -74,10 +70,15 @@ declare class Client {
      * @param clientId The ID of the client to check.
      * @param retryCount The current retry count.
      * @returns A Promise that resolves to true if the client exists, false otherwise.
-     * @private
      */
     private checkClientExistsWithRetry;
     private handleMessage;
+    getDebugInfo(): {
+        pageId: string;
+        isMainApp: boolean;
+        isIframe: boolean;
+        windowLevel: string;
+    };
 }
 
 declare enum AIChatNameEnum {

package/dist/index.js

@@ -29,6 +29,11 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/cors.ts
+function isAllowedOrigin(origin) {
+  return origin === "null" || origin.startsWith("http://localhost") || origin.endsWith(".bkpi.co") || origin.endsWith(".bookipi.com");
+}
+
 // src/PubSub.ts
 var _PubSub = class _PubSub {
   constructor() {
@@ -83,7 +88,7 @@ var _PubSub = class _PubSub {
     const subscriber = this.subscribers.get(message.to);
     if (subscriber) {
       if (subscriber.source) {
-        subscriber.source.postMessage(message, "*");
+        subscriber.source.postMessage(message, subscriber.origin || "*");
       } else {
         subscriber.callback(message);
       }
@@ -100,12 +105,15 @@ var _PubSub = class _PubSub {
   handleMessage(event) {
     const data = event.data;
     const source = event.source;
+    const origin = event.origin;
+    if (!isAllowedOrigin(origin)) return;
     if (data?.type === "REGISTER") {
       const registration = data;
       this.subscribers.set(registration.pageId, {
         source,
+        origin: registration.origin,
         callback: (message2) => {
-          source.postMessage(message2, "*");
+          source.postMessage(message2, registration.origin || "*");
         }
       });
       return;
@@ -120,7 +128,7 @@ var _PubSub = class _PubSub {
         type: "CLIENT_EXISTS_RESPONSE",
         requestId: data.requestId,
         exists: this.subscribers.has(data.clientId)
-      }, "*");
+      }, data.origin || "*");
       return;
     }
     if (!data || !data.from || !data.to) return;
@@ -130,8 +138,8 @@ var _PubSub = class _PubSub {
     }
     const subscriber = this.subscribers.get(message.to);
     if (!subscriber) return;
-    if (subscriber.source) {
-      subscriber.source.postMessage(message, "*");
+    if (subscriber?.source) {
+      subscriber.source.postMessage(message, subscriber.origin || "*");
     } else {
       subscriber.callback(message);
     }
@@ -162,46 +170,55 @@ var Client = class {
     __publicField(this, "callback");
     __publicField(this, "pubsub");
     __publicField(this, "isIframe");
+    __publicField(this, "isMainApp");
     __publicField(this, "boundHandleMessage");
     this.targetAIChatClientId = targetAIChatClientId;
     this.pageId = pageId;
-    this.pubsub = PubSub.getInstance();
     this.isIframe = window !== window.parent;
+    this.isMainApp = window === window.top;
     this.boundHandleMessage = this.handleMessage.bind(this);
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "REGISTER",
-        pageId: this.pageId
-      }, "*");
-      window.addEventListener("message", this.boundHandleMessage);
-    } else {
+    if (this.isMainApp) {
+      this.pubsub = PubSub.getInstance();
       this.pubsub.register(pageId, this.boundHandleMessage);
+      console.info(`\u2705 Client ${pageId} registered with main PubSub`);
+    } else {
+      console.info(
+        `\u{1F4E1} Client ${pageId} from iframe is registering with top window PubSub`
+      );
+      window.top.postMessage(
+        {
+          type: "REGISTER",
+          pageId: this.pageId,
+          origin: window.location.origin
+        },
+        "*"
+      );
+      window.addEventListener("message", this.boundHandleMessage);
     }
   }
   /**
    * Unregister the client from the pubsub.
    */
   unregister() {
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "UNREGISTER",
-        pageId: this.pageId
-      }, "*");
-    } else {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.unregister(this.pageId);
+    } else {
+      window.top.postMessage(
+        {
+          type: "UNREGISTER",
+          pageId: this.pageId,
+          origin: window.location.origin
+        },
+        "*"
+      );
+      window.removeEventListener("message", this.boundHandleMessage);
     }
+    console.info(`\u274C Client ${this.pageId} unregistered from PubSub`);
   }
-  /**
-   * Clean up the aichat registration if the iframe is removed.
-   * 
-   * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-   */
+  // Will not support this method anymore.
   cleanAIChat() {
-    if (this.isIframe) {
-      throw new Error("You are not allowed to clean up aichat from iframe.");
-    }
-    window.removeEventListener("message", this.boundHandleMessage);
-    return this.pubsub.unregister(this.targetAIChatClientId);
+    console.warn(`\u203C\uFE0F Unsupported operation cleanAIChat has been called from ${this.pageId}.`);
+    return false;
   }
   /**
    * Listen for messages from the parent page with a callback.
@@ -223,10 +240,10 @@ var Client = class {
       to,
       payload
     };
-    if (this.isIframe) {
-      window.parent.postMessage(message, "*");
-    } else {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.sendMessage(message);
+    } else {
+      window.top.postMessage(message, "*");
     }
   }
   /**
@@ -238,7 +255,12 @@ var Client = class {
    * @returns A Promise that resolves to true if the client exists, false otherwise.
    */
   checkClientExists(clientId, maxRetries = 3, retryInterval = 1e3) {
-    return this.checkClientExistsWithRetry(clientId, 0, maxRetries, retryInterval);
+    return this.checkClientExistsWithRetry(
+      clientId,
+      0,
+      maxRetries,
+      retryInterval
+    );
   }
   /**
    * Check if a client with the given ID exists in the PubSub system with retry mechanism.
@@ -247,13 +269,29 @@ var Client = class {
    * @param clientId The ID of the client to check.
    * @param retryCount The current retry count.
    * @returns A Promise that resolves to true if the client exists, false otherwise.
-   * @private
    */
   checkClientExistsWithRetry(clientId, retryCount, maxRetries, retryInterval) {
     return new Promise((resolve) => {
-      if (this.isIframe) {
+      if (this.isMainApp && this.pubsub) {
+        const exists = this.pubsub.isClientExists(clientId);
+        if (exists) {
+          resolve(true);
+        } else if (retryCount < maxRetries - 1) {
+          setTimeout(() => {
+            this.checkClientExistsWithRetry(
+              clientId,
+              retryCount + 1,
+              maxRetries,
+              retryInterval
+            ).then((exists2) => resolve(exists2));
+          }, retryInterval);
+        } else {
+          resolve(false);
+        }
+      } else {
         const requestId = `check-client-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const messageHandler = (event) => {
+          if (!isAllowedOrigin(event.origin)) return;
           const data = event.data;
           if (data && data.type === "CLIENT_EXISTS_RESPONSE" && data.requestId === requestId) {
             window.removeEventListener("message", messageHandler);
@@ -262,7 +300,12 @@ var Client = class {
               resolve(true);
             } else if (retryCount < maxRetries - 1) {
               setTimeout(() => {
-                this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists) => resolve(exists));
+                this.checkClientExistsWithRetry(
+                  clientId,
+                  retryCount + 1,
+                  maxRetries,
+                  retryInterval
+                ).then((exists) => resolve(exists));
               }, retryInterval);
             } else {
               resolve(false);
@@ -270,27 +313,19 @@ var Client = class {
           }
         };
         window.addEventListener("message", messageHandler);
-        window.parent.postMessage({
-          type: "CLIENT_EXISTS_CHECK",
-          clientId,
-          requestId,
-          from: this.pageId
-        }, "*");
+        window.top.postMessage(
+          {
+            type: "CLIENT_EXISTS_CHECK",
+            clientId,
+            requestId,
+            from: this.pageId
+          },
+          "*"
+        );
         const removeHandlerTimeout = setTimeout(() => {
           window.removeEventListener("message", messageHandler);
           resolve(false);
         }, retryInterval + 1e3);
-      } else {
-        const exists = this.pubsub.isClientExists(clientId);
-        if (exists) {
-          resolve(true);
-        } else if (retryCount < maxRetries - 1) {
-          setTimeout(() => {
-            this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists2) => resolve(exists2));
-          }, retryInterval);
-        } else {
-          resolve(false);
-        }
       }
     });
   }
@@ -302,15 +337,35 @@ var Client = class {
     } else {
       message = event;
     }
-    if (!message || !message.from || !message.to || message.to !== this.pageId) return;
+    if (!message || !message.from || !message.to || message.to !== this.pageId)
+      return;
     if (this.callback) {
       try {
         this.callback(message);
       } catch (error) {
-        console.error(`Client ${this.pageId} failed to process message:`, error);
+        console.error(
+          `Client ${this.pageId} failed to process message:`,
+          error
+        );
       }
     }
   }
+  getDebugInfo() {
+    let windowLevel = "main";
+    if (window !== window.top) {
+      if (window.parent === window.top) {
+        windowLevel = "first-level-iframe";
+      } else {
+        windowLevel = "nested-iframe";
+      }
+    }
+    return {
+      pageId: this.pageId,
+      isMainApp: this.isMainApp,
+      isIframe: this.isIframe,
+      windowLevel
+    };
+  }
 };
 
 // src/aichat/AIChatClient.ts

package/dist/index.mjs

@@ -2,6 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/cors.ts
+function isAllowedOrigin(origin) {
+  return origin === "null" || origin.startsWith("http://localhost") || origin.endsWith(".bkpi.co") || origin.endsWith(".bookipi.com");
+}
+
 // src/PubSub.ts
 var _PubSub = class _PubSub {
   constructor() {
@@ -56,7 +61,7 @@ var _PubSub = class _PubSub {
     const subscriber = this.subscribers.get(message.to);
     if (subscriber) {
       if (subscriber.source) {
-        subscriber.source.postMessage(message, "*");
+        subscriber.source.postMessage(message, subscriber.origin || "*");
       } else {
         subscriber.callback(message);
       }
@@ -73,12 +78,15 @@ var _PubSub = class _PubSub {
   handleMessage(event) {
     const data = event.data;
     const source = event.source;
+    const origin = event.origin;
+    if (!isAllowedOrigin(origin)) return;
     if (data?.type === "REGISTER") {
       const registration = data;
       this.subscribers.set(registration.pageId, {
         source,
+        origin: registration.origin,
         callback: (message2) => {
-          source.postMessage(message2, "*");
+          source.postMessage(message2, registration.origin || "*");
         }
       });
       return;
@@ -93,7 +101,7 @@ var _PubSub = class _PubSub {
         type: "CLIENT_EXISTS_RESPONSE",
         requestId: data.requestId,
         exists: this.subscribers.has(data.clientId)
-      }, "*");
+      }, data.origin || "*");
       return;
     }
     if (!data || !data.from || !data.to) return;
@@ -103,8 +111,8 @@ var _PubSub = class _PubSub {
     }
     const subscriber = this.subscribers.get(message.to);
     if (!subscriber) return;
-    if (subscriber.source) {
-      subscriber.source.postMessage(message, "*");
+    if (subscriber?.source) {
+      subscriber.source.postMessage(message, subscriber.origin || "*");
     } else {
       subscriber.callback(message);
     }
@@ -135,46 +143,55 @@ var Client = class {
     __publicField(this, "callback");
     __publicField(this, "pubsub");
     __publicField(this, "isIframe");
+    __publicField(this, "isMainApp");
     __publicField(this, "boundHandleMessage");
     this.targetAIChatClientId = targetAIChatClientId;
     this.pageId = pageId;
-    this.pubsub = PubSub.getInstance();
     this.isIframe = window !== window.parent;
+    this.isMainApp = window === window.top;
     this.boundHandleMessage = this.handleMessage.bind(this);
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "REGISTER",
-        pageId: this.pageId
-      }, "*");
-      window.addEventListener("message", this.boundHandleMessage);
-    } else {
+    if (this.isMainApp) {
+      this.pubsub = PubSub.getInstance();
       this.pubsub.register(pageId, this.boundHandleMessage);
+      console.info(`\u2705 Client ${pageId} registered with main PubSub`);
+    } else {
+      console.info(
+        `\u{1F4E1} Client ${pageId} from iframe is registering with top window PubSub`
+      );
+      window.top.postMessage(
+        {
+          type: "REGISTER",
+          pageId: this.pageId,
+          origin: window.location.origin
+        },
+        "*"
+      );
+      window.addEventListener("message", this.boundHandleMessage);
     }
   }
   /**
    * Unregister the client from the pubsub.
    */
   unregister() {
-    if (this.isIframe) {
-      window.parent.postMessage({
-        type: "UNREGISTER",
-        pageId: this.pageId
-      }, "*");
-    } else {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.unregister(this.pageId);
+    } else {
+      window.top.postMessage(
+        {
+          type: "UNREGISTER",
+          pageId: this.pageId,
+          origin: window.location.origin
+        },
+        "*"
+      );
+      window.removeEventListener("message", this.boundHandleMessage);
     }
+    console.info(`\u274C Client ${this.pageId} unregistered from PubSub`);
   }
-  /**
-   * Clean up the aichat registration if the iframe is removed.
-   * 
-   * Note: aichat itself does not know the iframe is removed then we have to clean up from parent
-   */
+  // Will not support this method anymore.
   cleanAIChat() {
-    if (this.isIframe) {
-      throw new Error("You are not allowed to clean up aichat from iframe.");
-    }
-    window.removeEventListener("message", this.boundHandleMessage);
-    return this.pubsub.unregister(this.targetAIChatClientId);
+    console.warn(`\u203C\uFE0F Unsupported operation cleanAIChat has been called from ${this.pageId}.`);
+    return false;
   }
   /**
    * Listen for messages from the parent page with a callback.
@@ -196,10 +213,10 @@ var Client = class {
       to,
       payload
     };
-    if (this.isIframe) {
-      window.parent.postMessage(message, "*");
-    } else {
+    if (this.isMainApp && this.pubsub) {
       this.pubsub.sendMessage(message);
+    } else {
+      window.top.postMessage(message, "*");
     }
   }
   /**
@@ -211,7 +228,12 @@ var Client = class {
    * @returns A Promise that resolves to true if the client exists, false otherwise.
    */
   checkClientExists(clientId, maxRetries = 3, retryInterval = 1e3) {
-    return this.checkClientExistsWithRetry(clientId, 0, maxRetries, retryInterval);
+    return this.checkClientExistsWithRetry(
+      clientId,
+      0,
+      maxRetries,
+      retryInterval
+    );
   }
   /**
    * Check if a client with the given ID exists in the PubSub system with retry mechanism.
@@ -220,13 +242,29 @@ var Client = class {
    * @param clientId The ID of the client to check.
    * @param retryCount The current retry count.
    * @returns A Promise that resolves to true if the client exists, false otherwise.
-   * @private
    */
   checkClientExistsWithRetry(clientId, retryCount, maxRetries, retryInterval) {
     return new Promise((resolve) => {
-      if (this.isIframe) {
+      if (this.isMainApp && this.pubsub) {
+        const exists = this.pubsub.isClientExists(clientId);
+        if (exists) {
+          resolve(true);
+        } else if (retryCount < maxRetries - 1) {
+          setTimeout(() => {
+            this.checkClientExistsWithRetry(
+              clientId,
+              retryCount + 1,
+              maxRetries,
+              retryInterval
+            ).then((exists2) => resolve(exists2));
+          }, retryInterval);
+        } else {
+          resolve(false);
+        }
+      } else {
         const requestId = `check-client-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         const messageHandler = (event) => {
+          if (!isAllowedOrigin(event.origin)) return;
           const data = event.data;
           if (data && data.type === "CLIENT_EXISTS_RESPONSE" && data.requestId === requestId) {
             window.removeEventListener("message", messageHandler);
@@ -235,7 +273,12 @@ var Client = class {
               resolve(true);
             } else if (retryCount < maxRetries - 1) {
               setTimeout(() => {
-                this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists) => resolve(exists));
+                this.checkClientExistsWithRetry(
+                  clientId,
+                  retryCount + 1,
+                  maxRetries,
+                  retryInterval
+                ).then((exists) => resolve(exists));
               }, retryInterval);
             } else {
               resolve(false);
@@ -243,27 +286,19 @@ var Client = class {
           }
         };
         window.addEventListener("message", messageHandler);
-        window.parent.postMessage({
-          type: "CLIENT_EXISTS_CHECK",
-          clientId,
-          requestId,
-          from: this.pageId
-        }, "*");
+        window.top.postMessage(
+          {
+            type: "CLIENT_EXISTS_CHECK",
+            clientId,
+            requestId,
+            from: this.pageId
+          },
+          "*"
+        );
         const removeHandlerTimeout = setTimeout(() => {
           window.removeEventListener("message", messageHandler);
           resolve(false);
         }, retryInterval + 1e3);
-      } else {
-        const exists = this.pubsub.isClientExists(clientId);
-        if (exists) {
-          resolve(true);
-        } else if (retryCount < maxRetries - 1) {
-          setTimeout(() => {
-            this.checkClientExistsWithRetry(clientId, retryCount + 1, maxRetries, retryInterval).then((exists2) => resolve(exists2));
-          }, retryInterval);
-        } else {
-          resolve(false);
-        }
       }
     });
   }
@@ -275,15 +310,35 @@ var Client = class {
     } else {
       message = event;
     }
-    if (!message || !message.from || !message.to || message.to !== this.pageId) return;
+    if (!message || !message.from || !message.to || message.to !== this.pageId)
+      return;
     if (this.callback) {
       try {
         this.callback(message);
       } catch (error) {
-        console.error(`Client ${this.pageId} failed to process message:`, error);
+        console.error(
+          `Client ${this.pageId} failed to process message:`,
+          error
+        );
       }
     }
   }
+  getDebugInfo() {
+    let windowLevel = "main";
+    if (window !== window.top) {
+      if (window.parent === window.top) {
+        windowLevel = "first-level-iframe";
+      } else {
+        windowLevel = "nested-iframe";
+      }
+    }
+    return {
+      pageId: this.pageId,
+      isMainApp: this.isMainApp,
+      isIframe: this.isIframe,
+      windowLevel
+    };
+  }
 };
 
 // src/aichat/AIChatClient.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iframe-pubsub",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "description": "A PubSub library for iframe communication.",
   "author": "Lap Tran",
   "license": "ISC",