@tinacms/app 2.5.5 → 2.5.7

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@tinacms/app",
-  "version": "2.5.5",
+  "version": "2.5.7",
   "main": "src/main.tsx",
+  "files": [
+    "src",
+    "index.html",
+    "favicon.svg",
+    "tsconfig.json",
+    "tsconfig.node.json"
+  ],
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "typescript": "^5.7.3"
+    "happy-dom": "15.10.2",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
     "react": ">=18.3.1 <20.0.0",
@@ -26,11 +36,15 @@
     "react-router-dom": "^6.30.3",
     "typescript": "^5.7.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "2.1.6",
-    "tinacms": "3.9.2"
+    "@tinacms/mdx": "2.1.8",
+    "tinacms": "3.9.4"
   },
   "repository": {
     "url": "https://github.com/tinacms/tinacms.git",
     "directory": "packages/@tinacms/app"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
   }
 }

package/src/lib/graphql-reducer.ts

@@ -10,7 +10,6 @@ import {
   ErrorDialog,
   Form,
   FormOptions,
-  GlobalFormPlugin,
   NAMER,
   Template,
   TinaCMS,
@@ -24,6 +23,11 @@ import { z } from 'zod';
 import { FormifyCallback, createForm, createGlobalForm } from './build-form';
 import { showErrorModal } from './errors';
 import { expandQuery, isConnectionType, isNodeType } from './expand-query';
+import {
+  getExpectedPreviewOrigin,
+  isFromTrustedPreviewOrigin,
+  postMessageToPreview,
+} from './preview-origin';
 import type {
   Payload,
   PostMessage,
@@ -200,6 +204,13 @@ export const useGraphQLReducer = (
 
   const activeField = searchParams.get('active-field');
 
+  // Origin of the preview document we load in the iframe. Used to validate
+  // inbound messages and as the explicit `targetOrigin` for outbound ones.
+  const expectedOrigin = React.useMemo(
+    () => getExpectedPreviewOrigin(url),
+    [url]
+  );
+
   React.useEffect(() => {
     const run = async () => {
       return Promise.all(
@@ -483,11 +494,15 @@ export const useGraphQLReducer = (
             });
           }
         }
-        iframe.current?.contentWindow?.postMessage({
-          type: 'updateData',
-          id: payload.id,
-          data: result.data,
-        });
+        postMessageToPreview(
+          iframe.current?.contentWindow,
+          {
+            type: 'updateData',
+            id: payload.id,
+            data: result.data,
+          },
+          expectedOrigin
+        );
       }
       cms.dispatch({
         type: 'form-lists:add',
@@ -502,6 +517,7 @@ export const useGraphQLReducer = (
     [
       resolvedDocuments.map((doc) => doc._internalSys.path).join('.'),
       activeField,
+      expectedOrigin,
     ]
   );
 
@@ -527,6 +543,17 @@ export const useGraphQLReducer = (
 
   const handleMessage = React.useCallback(
     (event: MessageEvent<PostMessage>) => {
+      // Validate the sender before reading `event.data`: only the preview
+      // iframe we loaded is trusted to drive the reducer.
+      if (
+        !isFromTrustedPreviewOrigin({
+          event,
+          expectedOrigin,
+          peerWindow: iframe.current?.contentWindow,
+        })
+      ) {
+        return;
+      }
       if (event.data.type === 'user-select-form') {
         const incoming = event.data.formId;
         // Buffer until `forms:add` resolves it if the form isn't built yet.
@@ -538,15 +565,23 @@ export const useGraphQLReducer = (
           type: 'set-quick-editing-supported',
           value: event.data.value,
         });
-        iframe.current?.contentWindow?.postMessage({
-          type: 'quickEditEnabled',
-          value: cms.state.sidebarDisplayState === 'open',
-        });
+        postMessageToPreview(
+          iframe.current?.contentWindow,
+          {
+            type: 'quickEditEnabled',
+            value: cms.state.sidebarDisplayState === 'open',
+          },
+          expectedOrigin
+        );
       }
       if (event?.data?.type === 'isEditMode') {
-        iframe?.current?.contentWindow?.postMessage({
-          type: 'tina:editMode',
-        });
+        postMessageToPreview(
+          iframe.current?.contentWindow,
+          {
+            type: 'tina:editMode',
+          },
+          expectedOrigin
+        );
       }
       if (event.data.type === 'field:selected') {
         const [queryId, eventFieldName] = event.data.fieldName.split('---');
@@ -597,7 +632,7 @@ export const useGraphQLReducer = (
       //   });
       // }
     },
-    [cms, JSON.stringify(results)]
+    [cms, JSON.stringify(results), expectedOrigin]
   );
 
   React.useEffect(() => {
@@ -627,11 +662,15 @@ export const useGraphQLReducer = (
   }, [cms.state.forms.length, pendingPrimaryId, activateFormByWireId]);
 
   React.useEffect(() => {
-    iframe.current?.contentWindow?.postMessage({
-      type: 'quickEditEnabled',
-      value: cms.state.sidebarDisplayState === 'open',
-    });
-  }, [cms.state.sidebarDisplayState]);
+    postMessageToPreview(
+      iframe.current?.contentWindow,
+      {
+        type: 'quickEditEnabled',
+        value: cms.state.sidebarDisplayState === 'open',
+      },
+      expectedOrigin
+    );
+  }, [cms.state.sidebarDisplayState, expectedOrigin]);
 
   React.useEffect(() => {
     cms.dispatch({ type: 'set-edit-mode', value: 'visual' });
@@ -1049,9 +1088,6 @@ const buildForm = ({
     // so without this the very first open leaves `form.queries` empty.
     form.addQuery(payloadId);
     if (shouldRegisterForm) {
-      if (collection.ui?.global) {
-        cms.plugins.add(new GlobalFormPlugin(form));
-      }
       cms.dispatch({ type: 'forms:add', value: form });
     }
   }

package/src/lib/preview-origin.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  getExpectedPreviewOrigin,
+  isFromTrustedPreviewOrigin,
+  postMessageToPreview,
+} from './preview-origin';
+
+const ADMIN = 'https://admin.example';
+const PREVIEW = 'https://preview.example';
+
+// A stand-in for the iframe's content window; we only need an identity to
+// compare `event.source` against.
+const makePeerWindow = () =>
+  ({ postMessage: vi.fn() }) as unknown as Window & {
+    postMessage: ReturnType<typeof vi.fn>;
+  };
+
+describe('getExpectedPreviewOrigin', () => {
+  it('resolves a relative admin URL to the admin origin', () => {
+    expect(getExpectedPreviewOrigin('/posts/hello', ADMIN)).toBe(ADMIN);
+  });
+
+  it('keeps the origin of an absolute preview URL', () => {
+    expect(getExpectedPreviewOrigin(`${PREVIEW}/posts/hello`, ADMIN)).toBe(
+      PREVIEW
+    );
+  });
+});
+
+describe('isFromTrustedPreviewOrigin', () => {
+  it('ignores messages from an untrusted origin', () => {
+    const peerWindow = makePeerWindow();
+    const event = {
+      origin: 'https://evil.example',
+      source: peerWindow,
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(false);
+  });
+
+  it('accepts messages from the trusted origin and peer window', () => {
+    const peerWindow = makePeerWindow();
+    const event = {
+      origin: PREVIEW,
+      source: peerWindow,
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(true);
+  });
+
+  it('ignores the trusted origin from the wrong source window', () => {
+    const peerWindow = makePeerWindow();
+    const otherFrame = makePeerWindow();
+    const event = {
+      origin: PREVIEW,
+      source: otherFrame,
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(false);
+  });
+
+  it('does not read event.data before validating the origin', () => {
+    const peerWindow = makePeerWindow();
+    const event = {
+      origin: 'https://evil.example',
+      source: peerWindow,
+      // Reading `data` would throw — proves the guard never touches the
+      // payload when the origin is untrusted.
+      get data(): unknown {
+        throw new Error('event.data must not be read before origin validation');
+      },
+    } as unknown as MessageEvent;
+
+    expect(() =>
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).not.toThrow();
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(false);
+  });
+
+  it('falls back to origin-only when no peer window handle is available', () => {
+    const event = {
+      origin: PREVIEW,
+      source: makePeerWindow(),
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow: null,
+      })
+    ).toBe(true);
+  });
+});
+
+describe('postMessageToPreview', () => {
+  it('posts with the exact expected targetOrigin, not a wildcard', () => {
+    const peerWindow = makePeerWindow();
+    const message = { type: 'updateData', id: 'q1', data: {} };
+
+    postMessageToPreview(peerWindow, message, PREVIEW);
+
+    expect(peerWindow.postMessage).toHaveBeenCalledWith(message, PREVIEW);
+    expect(peerWindow.postMessage).not.toHaveBeenCalledWith(
+      expect.anything(),
+      '*'
+    );
+  });
+
+  it('no-ops when there is no peer window', () => {
+    expect(() =>
+      postMessageToPreview(null, { type: 'updateData' }, PREVIEW)
+    ).not.toThrow();
+  });
+});

package/src/lib/preview-origin.ts

@@ -0,0 +1,61 @@
+/**
+ * Utilities for securing the admin <-> preview iframe postMessage channel.
+ *
+ * The trusted peer is the preview iframe loaded by the admin. Messages are only
+ * trusted when they match the expected preview origin and, when available, the
+ * iframe's exact `contentWindow`.
+ */
+
+/**
+ * Returns the origin expected for the preview iframe.
+ *
+ * Relative URLs resolve against `baseOrigin`; absolute URLs keep their own
+ * origin.
+ */
+export const getExpectedPreviewOrigin = (
+  url: string,
+  baseOrigin: string = typeof window !== 'undefined'
+    ? window.location.origin
+    : ''
+): string => {
+  try {
+    return new URL(url, baseOrigin || undefined).origin;
+  } catch {
+    return baseOrigin;
+  }
+};
+
+/**
+ * Checks whether a MessageEvent came from the trusted preview iframe.
+ *
+ * `event.data` is intentionally not read here, so callers can run this check
+ * before trusting the payload.
+ */
+export const isFromTrustedPreviewOrigin = ({
+  event,
+  expectedOrigin,
+  peerWindow,
+}: {
+  event: MessageEvent;
+  expectedOrigin: string;
+  peerWindow: Window | null | undefined;
+}): boolean => {
+  if (!expectedOrigin) return false;
+  if (event.origin !== expectedOrigin) return false;
+  if (peerWindow && event.source !== peerWindow) return false;
+  return true;
+};
+
+/**
+ * Sends a message to the preview iframe with a strict target origin.
+ *
+ * No-ops when the iframe window or origin is missing, and never uses `"*"`.
+ */
+export const postMessageToPreview = (
+  peerWindow: Window | null | undefined,
+  message: unknown,
+  expectedOrigin: string
+): void => {
+  if (!peerWindow || !expectedOrigin) return;
+  peerWindow.postMessage(message, expectedOrigin);
+};