resize-iframe 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# 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
+
+- d9fd60f: 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.

package/README.md

@@ -175,13 +175,21 @@ turned off for.
 Parent, on the handle returned by `iframeResize` (also at `iframe.iframeResizer`):
 
 ```javascript
+// Wait for ready first: a message posted at a frame still on about:blank is
+// dropped, and nothing retries it.
 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
@@ -220,10 +228,15 @@ declare module 'react' {
 ## Testing
 
 ```bash
-npx serve
+pnpm install
+pnpm exec playwright install
+pnpm test
 ```
 
-Open `resize-iframe-test.html`; it prints ten PASS lines.
+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.
 
 ## Browser Support
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resize-iframe",
-  "version": "0.1.0",
+  "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",
@@ -9,8 +9,13 @@
   "files": [
     "resize-iframe.js",
     "resize-iframe-child.js",
-    "resize-iframe.d.ts"
+    "resize-iframe.d.ts",
+    "CHANGELOG.md"
   ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "keywords": [
     "iframe",
     "iframe-resizer",
@@ -23,8 +28,24 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/jagreehal/resize-iframe"
+    "url": "git+https://github.com/jagreehal/resize-iframe.git"
   },
+  "homepage": "https://github.com/jagreehal/resize-iframe#readme",
+  "bugs": "https://github.com/jagreehal/resize-iframe/issues",
   "author": "Jag Reehal <jag@jagreehal.com>",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@changesets/cli": "2.31.0",
+    "@playwright/test": "1.60.0",
+    "serve": "14.2.6",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "typecheck": "tsc --noEmit --strict --lib es2022,dom resize-iframe.d.ts",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish"
+  }
 }

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;