@tinacms/app 2.5.4 → 2.5.6

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @tinacms/app
 
+## 2.5.6
+
+### Patch Changes
+
+- [#7056](https://github.com/tinacms/tinacms/pull/7056) [`c491fc5`](https://github.com/tinacms/tinacms/commit/c491fc55e612725f5d775eeb1fdf3f8ba82314fa) Thanks [@Aibono1225](https://github.com/Aibono1225)! - Harden cross-window message handling and rich-text URL sanitization.
+
+  Adds stricter origin/source checks for trusted message flows, use explicit target origins for preview iframe message, and applies URL sanitization to slatejson rich-text parsing and default rich-text link/image rendering.
+
+- Updated dependencies [[`42760d8`](https://github.com/tinacms/tinacms/commit/42760d8f5afd201107e27e274308af37f96ba8d0), [`c491fc5`](https://github.com/tinacms/tinacms/commit/c491fc55e612725f5d775eeb1fdf3f8ba82314fa)]:
+  - tinacms@3.9.3
+  - @tinacms/mdx@2.1.7
+
+## 2.5.5
+
+### Patch Changes
+
+- [#6681](https://github.com/tinacms/tinacms/pull/6681) [`95b7523`](https://github.com/tinacms/tinacms/commit/95b75237cb91ec3dc5dac9ce52359f9786072502) Thanks [@isaaclombardssw](https://github.com/isaaclombardssw)! - Fix click-to-edit for fields in connection query results (e.g. ruleConnection)
+
+- Updated dependencies []:
+  - tinacms@3.9.2
+
 ## 2.5.4
 
 ### Patch Changes

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@tinacms/app",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "main": "src/main.tsx",
   "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 +29,15 @@
     "react-router-dom": "^6.30.3",
     "typescript": "^5.7.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "2.1.6",
-    "tinacms": "3.9.1"
+    "@tinacms/mdx": "2.1.7",
+    "tinacms": "3.9.3"
   },
   "repository": {
     "url": "https://github.com/tinacms/tinacms.git",
     "directory": "packages/@tinacms/app"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
   }
 }

package/src/lib/expand-query.ts

@@ -3,14 +3,17 @@ import * as G from 'graphql';
 export const expandQuery = ({
   schema,
   documentNode,
+  includeNodeMetadata,
 }: {
   schema: G.GraphQLSchema;
   documentNode: G.DocumentNode;
+  includeNodeMetadata?: boolean;
 }): G.DocumentNode => {
   const documentNodeWithTypenames = addTypenameToDocument(documentNode);
   return addMetaFieldsToQuery(
     documentNodeWithTypenames,
-    new G.TypeInfo(schema)
+    new G.TypeInfo(schema),
+    includeNodeMetadata
   );
 };
 
@@ -114,7 +117,8 @@ const addMetadataField = (
 
 const addMetaFieldsToQuery = (
   documentNode: G.DocumentNode,
-  typeInfo: G.TypeInfo
+  typeInfo: G.TypeInfo,
+  includeNodeMetadata?: boolean
 ) => {
   const addMetaFields: G.VisitFn<G.ASTNode, G.FieldNode> = (
     node: G.FieldNode
@@ -126,7 +130,11 @@ const addMetaFieldsToQuery = (
           kind: 'SelectionSet',
           selections: [],
         }),
-        selections: [...(node.selectionSet?.selections || []), ...metaFields],
+        selections: [
+          ...(node.selectionSet?.selections || []),
+          ...metaFields,
+          ...(includeNodeMetadata ? nodeMetadataFields : []),
+        ],
       },
     };
   };
@@ -218,6 +226,17 @@ const metaFields: G.SelectionNode[] =
   // @ts-ignore
   node.definitions[0].selectionSet.selections;
 
+const nodeMetadataFragment = G.parse(`
+ query Sample {
+  ...on Document {
+    _tina_metadata
+    _content_source
+  }
+ }`);
+const nodeMetadataFields: G.SelectionNode[] =
+  // @ts-ignore
+  nodeMetadataFragment.definitions[0].selectionSet.selections;
+
 export const isNodeType = (type: G.GraphQLOutputType) => {
   const namedType = G.getNamedType(type);
   if (G.isInterfaceType(namedType)) {

package/src/lib/graphql-reducer.ts

@@ -24,6 +24,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 +205,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 +495,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 +518,7 @@ export const useGraphQLReducer = (
     [
       resolvedDocuments.map((doc) => doc._internalSys.path).join('.'),
       activeField,
+      expectedOrigin,
     ]
   );
 
@@ -527,6 +544,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 +566,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 +633,7 @@ export const useGraphQLReducer = (
       //   });
       // }
     },
-    [cms, JSON.stringify(results)]
+    [cms, JSON.stringify(results), expectedOrigin]
   );
 
   React.useEffect(() => {
@@ -627,11 +663,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' });
@@ -942,6 +982,7 @@ const expandPayload = async (
   const expandedDocumentNodeForResolver = expandQuery({
     schema: schemaForResolver,
     documentNode,
+    includeNodeMetadata: true,
   });
   const expandedQueryForResolver = G.print(expandedDocumentNodeForResolver);
   return { ...payload, expandedQuery, expandedData, expandedQueryForResolver };

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);
+};

package/src/lib/util.ts

@@ -93,9 +93,10 @@ export const getDeepestMetadata = (state: Object, complexKey: string): any => {
     }
     const value = current[key];
     if (value?._tina_metadata) {
-      // We're at a reference field, we don't want to select the
-      // reference form, just the reference select field
-      if (complexKey === value._tina_metadata?.prefix && metadata) {
+      if (value._tina_metadata.id === null) {
+        // Placeholder metadata from connection/list types — skip it
+      } else if (complexKey === value._tina_metadata?.prefix && metadata) {
+        // Reference field — keep the parent form's metadata
       } else {
         metadata = value._tina_metadata;
       }

package/vitest.config.ts

@@ -0,0 +1,10 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    include: ['src/**/*.test.ts'],
+  },
+});