@turnkey/iframe-stamper - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

./dist/index.js

@@ -51,2 +51,5 @@ 'use strict';
     IframeEventType["Stamp"] = "STAMP";
+    // Event sent by the parent to establish secure communication via MessageChannel API.
+    // Value: MessageChannel port
+    IframeEventType["TurnkeyInitMessageChannel"] = "TURNKEY_INIT_MESSAGE_CHANNEL";
     // Event sent by the iframe to communicate an error
@@ -78,2 +81,5 @@ // Value: serialized error
         }
+        if (typeof MessageChannel === "undefined") {
+            throw new Error("Cannot initialize iframe without MessageChannel support");
+        }
         if (!config.iframeContainer) {
@@ -97,2 +103,8 @@ throw new Error("Iframe container cannot be found");
         this.iframePublicKey = null;
+        /**
+         * The MessageChannel API is used to establish secure communication between two execution contexts.
+         * In this case, the parent page and the iframe.
+         * See https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel
+         */
+        this.messageChannel = new MessageChannel();
     }
@@ -104,9 +116,23 @@ /**
         this.container.appendChild(this.iframe);
+        /**
+         * Once the iframe is loaded, we send a message to the iframe to hand over the
+         * MessageChannel's second port, port2, and establish the secure communication channel.
+         * The iframe will use this port to send messages back to the parent page.
+         * See https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage#transfer
+         */
+        this.iframe.addEventListener("load", () => {
+            if (!this.iframe.contentWindow ||
+                !this.iframe.contentWindow.postMessage) {
+                throw new Error("contentWindow or contentWindow.postMessage does not exist");
+            }
+            this.iframe.contentWindow.postMessage({ type: exports.IframeEventType.TurnkeyInitMessageChannel }, this.iframeOrigin, [this.messageChannel.port2]);
+        });
         return new Promise((resolve, _reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out
-                    return;
-                }
+            /**
+             * The MessageChannel port1 property is the port that gets attached
+             * to the context that instantiated the MessageChannel. This class, the IframeStamper,
+             * instantied the MessageChannel and will use port1 to send messages to the iframe.
+             * See https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel/port1
+             */
+            this.messageChannel.port1.onmessage = (event) => {
                 if (event.data?.type === exports.IframeEventType.PublicKeyReady) {
@@ -116,3 +142,3 @@ this.iframePublicKey = event.data["value"];
                 }
-            }, false);
+            };
         });
@@ -124,2 +150,4 @@ }
     clear() {
+        this.messageChannel?.port1?.close();
+        this.messageChannel?.port2?.close();
         this.iframe.remove();
@@ -134,2 +162,27 @@ }
     /**
+     * Adds a message handler to the iframe's message channel
+     */
+    addMessageHandler() {
+        return new Promise((resolve, reject) => {
+            this.messageChannel.port1.onmessage = (event) => {
+                this.onMessageHandler(event, resolve, reject);
+            };
+        });
+    }
+    onMessageHandler(event, resolve, reject) {
+        switch (event.data?.type) {
+            case exports.IframeEventType.Stamp:
+                resolve({
+                    stampHeaderName: stampHeaderName,
+                    stampHeaderValue: event.data["value"],
+                });
+                break;
+            case exports.IframeEventType.Error:
+                reject(event.data["value"]);
+                break;
+            default:
+                resolve(event.data["value"]);
+        }
+    }
+    /**
      * Function to inject a new credential into the iframe
@@ -142,19 +195,9 @@ * The bundle should be encrypted to the iframe's initial public key
         return new Promise((resolve, reject) => {
-            this.iframe.contentWindow?.postMessage({
+            this.messageChannel.port1.postMessage({
                 type: exports.IframeEventType.InjectCredentialBundle,
                 value: bundle,
-            }, "*");
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
+            });
+            this.messageChannel.port1.onmessage = (event) => {
+                this.onMessageHandler(event, resolve, reject);
+            };
         });
@@ -170,3 +213,3 @@ }
     async injectKeyExportBundle(bundle, organizationId, keyFormat) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.InjectKeyExportBundle,
@@ -176,18 +219,4 @@ value: bundle,
             organizationId,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -201,22 +230,8 @@ /**
     async injectWalletExportBundle(bundle, organizationId) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.InjectWalletExportBundle,
             value: bundle,
             organizationId,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -228,3 +243,3 @@ /**
     async injectImportBundle(bundle, organizationId, userId) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.InjectImportBundle,
@@ -234,18 +249,4 @@ value: bundle,
             userId,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -259,20 +260,6 @@ /**
     async extractWalletEncryptedBundle() {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.ExtractWalletEncryptedBundle,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.EncryptedBundleExtracted) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -287,21 +274,7 @@ /**
     async extractKeyEncryptedBundle(keyFormat) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.ExtractKeyEncryptedBundle,
             keyFormat: keyFormat,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.EncryptedBundleExtracted) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -314,21 +287,7 @@ /**
         const settingsStr = JSON.stringify(settings);
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.ApplySettings,
             value: settingsStr,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.SettingsApplied) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -342,25 +301,7 @@ /**
         }
-        const iframeOrigin = this.iframeOrigin;
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.StampRequest,
             value: payload,
-        }, "*");
-        return new Promise(function (resolve, reject) {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.Stamp) {
-                    resolve({
-                        stampHeaderName: stampHeaderName,
-                        stampHeaderValue: event.data["value"],
-                    });
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -367,0 +308,0 @@ }

CHANGELOG.md

 # @turnkey/iframe-stamper
 
+## 2.1.0
+
+### Minor Changes
+
+- fad7c37: @turnkey/iframe-stamper - Implemented MessageChannel API for secure communication between the parent and iframe.
+
+  @turnkey/sdk-browser - fixed spelling in package.json
+  @turnkey/sdk-server - fixed spelling in package.json
+
 ## 2.0.0
@@ -4,0 +13,0 @@

dist/index.d.ts

@@ -16,2 +16,3 @@ /// <reference lib="dom" />
     Stamp = "STAMP",
+    TurnkeyInitMessageChannel = "TURNKEY_INIT_MESSAGE_CHANNEL",
     Error = "ERROR"
@@ -67,2 +68,3 @@ }
     iframePublicKey: string | null;
+    messageChannel: MessageChannel;
     /**
@@ -86,2 +88,7 @@ * Creates a new iframe stamper. This function _does not_ insert the iframe in the DOM.
     /**
+     * Adds a message handler to the iframe's message channel
+     */
+    addMessageHandler(): Promise<any>;
+    onMessageHandler(event: MessageEvent, resolve: any, reject: any): void;
+    /**
      * Function to inject a new credential into the iframe
@@ -88,0 +95,0 @@ * The bundle should be encrypted to the iframe's initial public key

dist/index.js

@@ -51,2 +51,5 @@ 'use strict';
     IframeEventType["Stamp"] = "STAMP";
+    // Event sent by the parent to establish secure communication via MessageChannel API.
+    // Value: MessageChannel port
+    IframeEventType["TurnkeyInitMessageChannel"] = "TURNKEY_INIT_MESSAGE_CHANNEL";
     // Event sent by the iframe to communicate an error
@@ -78,2 +81,5 @@ // Value: serialized error
         }
+        if (typeof MessageChannel === "undefined") {
+            throw new Error("Cannot initialize iframe without MessageChannel support");
+        }
         if (!config.iframeContainer) {
@@ -97,2 +103,8 @@ throw new Error("Iframe container cannot be found");
         this.iframePublicKey = null;
+        /**
+         * The MessageChannel API is used to establish secure communication between two execution contexts.
+         * In this case, the parent page and the iframe.
+         * See https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel
+         */
+        this.messageChannel = new MessageChannel();
     }
@@ -104,9 +116,23 @@ /**
         this.container.appendChild(this.iframe);
+        /**
+         * Once the iframe is loaded, we send a message to the iframe to hand over the
+         * MessageChannel's second port, port2, and establish the secure communication channel.
+         * The iframe will use this port to send messages back to the parent page.
+         * See https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage#transfer
+         */
+        this.iframe.addEventListener("load", () => {
+            if (!this.iframe.contentWindow ||
+                !this.iframe.contentWindow.postMessage) {
+                throw new Error("contentWindow or contentWindow.postMessage does not exist");
+            }
+            this.iframe.contentWindow.postMessage({ type: exports.IframeEventType.TurnkeyInitMessageChannel }, this.iframeOrigin, [this.messageChannel.port2]);
+        });
         return new Promise((resolve, _reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out
-                    return;
-                }
+            /**
+             * The MessageChannel port1 property is the port that gets attached
+             * to the context that instantiated the MessageChannel. This class, the IframeStamper,
+             * instantied the MessageChannel and will use port1 to send messages to the iframe.
+             * See https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel/port1
+             */
+            this.messageChannel.port1.onmessage = (event) => {
                 if (event.data?.type === exports.IframeEventType.PublicKeyReady) {
@@ -116,3 +142,3 @@ this.iframePublicKey = event.data["value"];
                 }
-            }, false);
+            };
         });
@@ -124,2 +150,4 @@ }
     clear() {
+        this.messageChannel?.port1?.close();
+        this.messageChannel?.port2?.close();
         this.iframe.remove();
@@ -134,2 +162,27 @@ }
     /**
+     * Adds a message handler to the iframe's message channel
+     */
+    addMessageHandler() {
+        return new Promise((resolve, reject) => {
+            this.messageChannel.port1.onmessage = (event) => {
+                this.onMessageHandler(event, resolve, reject);
+            };
+        });
+    }
+    onMessageHandler(event, resolve, reject) {
+        switch (event.data?.type) {
+            case exports.IframeEventType.Stamp:
+                resolve({
+                    stampHeaderName: stampHeaderName,
+                    stampHeaderValue: event.data["value"],
+                });
+                break;
+            case exports.IframeEventType.Error:
+                reject(event.data["value"]);
+                break;
+            default:
+                resolve(event.data["value"]);
+        }
+    }
+    /**
      * Function to inject a new credential into the iframe
@@ -142,19 +195,9 @@ * The bundle should be encrypted to the iframe's initial public key
         return new Promise((resolve, reject) => {
-            this.iframe.contentWindow?.postMessage({
+            this.messageChannel.port1.postMessage({
                 type: exports.IframeEventType.InjectCredentialBundle,
                 value: bundle,
-            }, "*");
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
+            });
+            this.messageChannel.port1.onmessage = (event) => {
+                this.onMessageHandler(event, resolve, reject);
+            };
         });
@@ -170,3 +213,3 @@ }
     async injectKeyExportBundle(bundle, organizationId, keyFormat) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.InjectKeyExportBundle,
@@ -176,18 +219,4 @@ value: bundle,
             organizationId,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -201,22 +230,8 @@ /**
     async injectWalletExportBundle(bundle, organizationId) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.InjectWalletExportBundle,
             value: bundle,
             organizationId,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -228,3 +243,3 @@ /**
     async injectImportBundle(bundle, organizationId, userId) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.InjectImportBundle,
@@ -234,18 +249,4 @@ value: bundle,
             userId,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.BundleInjected) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -259,20 +260,6 @@ /**
     async extractWalletEncryptedBundle() {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.ExtractWalletEncryptedBundle,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.EncryptedBundleExtracted) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -287,21 +274,7 @@ /**
     async extractKeyEncryptedBundle(keyFormat) {
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.ExtractKeyEncryptedBundle,
             keyFormat: keyFormat,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.EncryptedBundleExtracted) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -314,21 +287,7 @@ /**
         const settingsStr = JSON.stringify(settings);
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.ApplySettings,
             value: settingsStr,
-        }, "*");
-        return new Promise((resolve, reject) => {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== this.iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.SettingsApplied) {
-                    resolve(event.data["value"]);
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -342,25 +301,7 @@ /**
         }
-        const iframeOrigin = this.iframeOrigin;
-        this.iframe.contentWindow?.postMessage({
+        this.messageChannel.port1.postMessage({
             type: exports.IframeEventType.StampRequest,
             value: payload,
-        }, "*");
-        return new Promise(function (resolve, reject) {
-            window.addEventListener("message", (event) => {
-                if (event.origin !== iframeOrigin) {
-                    // There might be other things going on in the window, for example: react dev tools, other extensions, etc.
-                    // Instead of erroring out we simply return. Not our event!
-                    return;
-                }
-                if (event.data?.type === exports.IframeEventType.Stamp) {
-                    resolve({
-                        stampHeaderName: stampHeaderName,
-                        stampHeaderValue: event.data["value"],
-                    });
-                }
-                if (event.data?.type === exports.IframeEventType.Error) {
-                    reject(event.data["value"]);
-                }
-            }, false);
         });
+        return this.addMessageHandler();
     }
@@ -367,0 +308,0 @@ }

package.json

 {
   "name": "@turnkey/iframe-stamper",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "./dist/index.js",
@@ -5,0 +5,0 @@ "module": "./dist/index.mjs",

No alert changes

Worsened metrics

Total package byte prevSize

79089

decreased by-14.36%

Lines of code

1017

decreased by-14.32%

No dependency changes