resize-iframe 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # resize-iframe
 
+## 0.2.0
+
+### Minor Changes
+
+- f2e12a7: Give the framed page a way to receive what the parent sends.
+
+  `parentIframe.onMessage = (message) => …` delivers whatever the embedder posted with `sendMessage`. Until now the channel was send-only: the parent could post into the frame, but the child script never listened, so every embedded page had to hand-roll a `message` listener and work out for itself which messages came from the embedder.
+
+  Both directions now travel in the same `resize-iframe-message` envelope, and the child checks `event.source === parent` the same way the parent checks the frame's own window. Unrelated postMessage traffic aimed at your frame no longer reaches the callback.
+
+  **Breaking for hand-rolled child listeners.** A child page reading `event.data` directly now sees `{ 'resize-iframe-message': … }` rather than the bare payload. Use `parentIframe.onMessage` instead.
+
+### Patch Changes
+
+- f2e12a7: Document the third-party embedding flow and cover the library with a Playwright suite.
+
+  - README: Storage Access API setup for cross-site embeds, including the `allow="storage-access"` and `allow-storage-access-by-user-activation` requirements, and why the request has to come from a click inside the frame.
+  - README: note that `sendMessage` is dropped if the frame is still on `about:blank`, so send it after `ready`.
+  - 33 specs across Chromium, Firefox and WebKit, served from two origins so they run against real cross-site restrictions rather than same-document shortcuts.
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -181,9 +181,15 @@ frame.sendMessage({ hello: 'world' }, 'https://anotherdomain.com');
 frame.disconnect(); // call before removing the iframe from the page
 ```
 
+Both directions travel in the same envelope, so `parentIframe.onMessage` only ever
+sees what the embedder sent — not the postMessage traffic every other script on the
+page also aims at your frame. A plain `addEventListener('message', …)` in the child
+would have to sort that out itself.
+
 Child, on `window.parentIframe`:
 
 ```javascript
+parentIframe.onMessage = (message) => { … }; // ← parent's sendMessage
 parentIframe.sendMessage('ping'); // → parent's onMessage / 'frame-message' event
 parentIframe.autoResize(false); // pause resizing; returns the current state
 parentIframe.resize(); // nudge, for a change neither observer sees
@@ -227,21 +233,11 @@ pnpm exec playwright install
 pnpm test
 ```
 
-33 Playwright specs across Chromium, Firefox and WebKit. The suite serves the
+34 Playwright specs across Chromium, Firefox and WebKit. The suite serves the
 parent page and the child pages from two different origins — `localhost` and
 `127.0.0.1`, which are cross-*site*, not merely cross-origin — so every test runs
 against the same partitioning and `contentDocument` restrictions as production.
 
-## Testing
-
-```bash
-pnpm install
-pnpm exec playwright install
-pnpm test
-```
-
-21 Playwright specs, run across Chromium, Firefox and WebKit.
-
 ## Browser Support
 
 - Chrome/Edge 80+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resize-iframe",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Iframes that size themselves to their content, cross-origin included. No build step, no dependencies.",
   "type": "module",
   "main": "resize-iframe.js",

package/resize-iframe-child.js

@@ -12,6 +12,7 @@ const start = () => {
   let last = { height: 0, width: 0 };
   let queued = false;
   let auto = true;
+  let inbound = null;
 
   // Measure the bottom and right edges of the marked elements, or of body's
   // children. Never body itself: it stretches to fill the frame in quirks mode
@@ -64,6 +65,18 @@ const start = () => {
   });
   addEventListener('load', schedule); // images and fonts landing late
 
+  // Messages from the embedder. event.source is set by the browser and cannot be
+  // forged, so this is the same guard the parent uses in the other direction, and
+  // the envelope keeps unrelated postMessage traffic (analytics, wallets, other
+  // embeds) out of the callback.
+  addEventListener('message', (event) => {
+    if (event.source !== parent) return;
+    const data = event.data;
+    if (data && typeof data === 'object' && 'resize-iframe-message' in data) {
+      inbound?.(data['resize-iframe-message']);
+    }
+  });
+
   // Third-party cookies: an embedded page gets partitioned storage until the user
   // grants access. Probe the API rather than sniffing the browser — Safari and
   // Chrome both partition, and which browsers do is not a stable list.
@@ -77,6 +90,13 @@ const start = () => {
   };
 
   window.parentIframe = {
+    // Assign a function to receive what the parent sends with sendMessage().
+    get onMessage() {
+      return inbound;
+    },
+    set onMessage(fn) {
+      inbound = fn;
+    },
     autoResize(state) {
       if (state !== undefined) auto = state;
       if (auto) schedule();

package/resize-iframe.d.ts

@@ -32,6 +32,8 @@ export function iframeResize(
 
 /** Available inside the framed page once resize-iframe-child.js has loaded. */
 export interface ParentIframe {
+  /** Called with whatever the parent sends via `sendMessage`. Assign to subscribe. */
+  onMessage: ((message: unknown) => void) | null;
   autoResize(state?: boolean): boolean;
   resize(): void;
   sendMessage(message: unknown, targetOrigin?: string): void;

package/resize-iframe.js

@@ -88,8 +88,10 @@ function connect(iframe, settings) {
       clearTimeout(warning);
       delete iframe.iframeResizer;
     },
+    // Same envelope the child sends back in, so the framed page can tell an
+    // embedder message from every other script posting at it.
     sendMessage(message, targetOrigin = '*') {
-      iframe.contentWindow?.postMessage(message, targetOrigin);
+      iframe.contentWindow?.postMessage({ 'resize-iframe-message': message }, targetOrigin);
     },
   };
   return iframe.iframeResizer;