@bygghammar/cms-platform 0.95.0 → 0.96.0

package/src/server/popup-optin-webhook-core.ts

@@ -25,6 +25,14 @@
  * Server-only. Never import from client code.
  */
 
+import {
+  fetchTransport,
+  injectedFetchResolver,
+  safeRequest,
+  WEBHOOK_POLICY,
+  type Resolver,
+  type Transport,
+} from "./outbound-http";
 import { checkWebhookUrl } from "./webhook-url-guard";
 
 export const POPUP_WEBHOOK_SCHEMA_VERSION = 1;
@@ -56,8 +64,15 @@ export interface OptInWebhookInput {
   readonly timeoutMs?: number;
   readonly maxResponseBytes?: number;
   readonly maxRedirects?: number;
-  /** Injected in tests. */
+  /**
+   * Test seam: requests go through this fetch instead of the network. Every
+   * hop is still checked and followed by the outbound policy, but names are
+   * not looked up and the connection is not pinned. Production passes none.
+   */
   readonly fetchImpl?: typeof fetch;
+  /** Test seams for the pinned path: a fake resolver and transport. */
+  readonly resolver?: Resolver;
+  readonly transport?: Transport;
   readonly now?: () => number;
 }
 
@@ -147,71 +162,6 @@ export async function signBody(
     .digest("hex");
 }
 
-/**
- * Read at most `limit` bytes of a response, then stop.
- *
- * A receiver that answers with a gigabyte would otherwise hold this server's
- * memory hostage. Nothing is done with the body but the read has to be bounded.
- */
-async function drainBounded(
-  response: Response,
-  limit: number,
-): Promise<boolean> {
-  const body = response.body;
-  if (body === null) return true;
-  const reader = body.getReader();
-  let total = 0;
-  try {
-    for (;;) {
-      const { done, value } = await reader.read();
-      if (done) return true;
-      total += value?.byteLength ?? 0;
-      if (total > limit) return false;
-    }
-  } finally {
-    await reader.cancel().catch(() => undefined);
-  }
-}
-
-/**
- * POST with every redirect hop re-validated.
- *
- * `redirect: "manual"` is what makes the guard meaningful: with the default
- * `follow`, the runtime chases a 302 into the private network before any of
- * this code sees it.
- */
-async function postWithGuardedRedirects(
-  url: string,
-  init: RequestInit,
-  options: { fetchImpl: typeof fetch; maxRedirects: number; maxBytes: number },
-): Promise<
-  | { response: Response; oversize: boolean }
-  | { blocked: DeliveryOutcome["errorCategory"] }
-> {
-  let target = url;
-  for (let hop = 0; hop <= options.maxRedirects; hop += 1) {
-    const check = checkWebhookUrl(target);
-    if (!check.ok) return { blocked: "blocked-endpoint" };
-
-    const response = await options.fetchImpl(target, {
-      ...init,
-      redirect: "manual",
-    });
-
-    if (response.status >= 300 && response.status < 400) {
-      const location = response.headers.get("location");
-      if (location === null) return { response, oversize: false };
-      // Resolve relative redirects against the hop we actually made.
-      target = new URL(location, target).toString();
-      continue;
-    }
-
-    const withinLimit = await drainBounded(response, options.maxBytes);
-    return { response, oversize: !withinLimit };
-  }
-  return { blocked: "too-many-redirects" };
-}
-
 /**
  * Deliver one opt-in. Never throws.
  *
@@ -224,9 +174,6 @@ export async function deliverOptInWebhook(
 ): Promise<DeliveryOutcome> {
   const now = input.now ?? Date.now;
   const startedAt = now();
-  const fetchImpl = input.fetchImpl ?? fetch;
-  const maxBytes = input.maxResponseBytes ?? DEFAULT_MAX_BYTES;
-  const maxRedirects = input.maxRedirects ?? DEFAULT_MAX_REDIRECTS;
 
   const check = checkWebhookUrl(input.endpoint);
   if (!check.ok) {
@@ -242,84 +189,76 @@ export async function deliverOptInWebhook(
   const timestamp = String(Math.floor(now() / 1000));
   const signature = await signBody(input.signingSecret, timestamp, body);
 
-  const controller = new AbortController();
-  const timer = setTimeout(
-    () => controller.abort(),
-    input.timeoutMs ?? DEFAULT_TIMEOUT_MS,
-  );
-
-  try {
-    const result = await postWithGuardedRedirects(
-      check.url.toString(),
-      {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
-          "user-agent": "cms-platform-webhooks/1",
-          "x-webhook-event":
-            input.test === true ? "popup.opt_in.test" : "popup.opt_in",
-          "x-webhook-event-id": input.eventId,
-          // The receiver deduplicates on this. Retries of the same opt-in
-          // reuse the same value, which is what makes a retry safe.
-          "x-webhook-idempotency-key": input.eventId,
-          "x-webhook-timestamp": timestamp,
-          "x-webhook-signature": `v1=${signature}`,
-        },
-        body,
-        signal: controller.signal,
-      },
-      { fetchImpl, maxRedirects, maxBytes },
-    );
+  // Every hop is checked, looked up, pinned and capped by the shared outbound
+  // policy; redirects are followed there, never by the runtime.
+  const network = input.fetchImpl
+    ? { transport: fetchTransport(input.fetchImpl), resolver: injectedFetchResolver }
+    : { transport: input.transport, resolver: input.resolver };
+  const result = await safeRequest({
+    url: check.url.toString(),
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      "user-agent": "cms-platform-webhooks/1",
+      "x-webhook-event": input.test === true ? "popup.opt_in.test" : "popup.opt_in",
+      "x-webhook-event-id": input.eventId,
+      // The receiver deduplicates on this. Retries of the same opt-in
+      // reuse the same value, which is what makes a retry safe.
+      "x-webhook-idempotency-key": input.eventId,
+      "x-webhook-timestamp": timestamp,
+      "x-webhook-signature": `v1=${signature}`,
+    },
+    body,
+    policy: {
+      ...WEBHOOK_POLICY,
+      timeoutMs: input.timeoutMs ?? DEFAULT_TIMEOUT_MS,
+      maxResponseBytes: input.maxResponseBytes ?? DEFAULT_MAX_BYTES,
+      maxRedirects: input.maxRedirects ?? DEFAULT_MAX_REDIRECTS,
+    },
+    ...network,
+  });
+  const durationMs = now() - startedAt;
 
-    if ("blocked" in result) {
-      return {
-        ok: false,
-        errorCategory: result.blocked,
-        error:
-          result.blocked === "too-many-redirects"
-            ? "The endpoint redirected too many times."
-            : "The endpoint redirected to an address inside this server's network.",
-        durationMs: now() - startedAt,
-      };
+  if (!result.ok) {
+    switch (result.failure) {
+      case "blocked-url":
+      case "blocked-address":
+        return {
+          ok: false,
+          errorCategory: "blocked-endpoint",
+          error: "The endpoint, or an address it redirected to, is not a public https address.",
+          durationMs,
+        };
+      case "cross-origin-redirect":
+        return {
+          ok: false,
+          errorCategory: "blocked-endpoint",
+          error: "The endpoint redirected to another site; an opt-in is only sent to the configured address.",
+          durationMs,
+        };
+      case "too-many-redirects":
+        return { ok: false, errorCategory: "too-many-redirects", error: "The endpoint redirected too many times.", durationMs };
+      case "too-large":
+        return { ok: false, errorCategory: "too-large", error: "The endpoint's reply was too large.", durationMs };
+      case "timeout":
+        return { ok: false, errorCategory: "timeout", error: "The endpoint did not answer in time.", durationMs };
+      default:
+        return { ok: false, errorCategory: "network", error: "The endpoint could not be reached.", durationMs };
     }
+  }
 
-    const { response, oversize } = result;
-    if (oversize) {
-      return {
-        ok: false,
-        status: response.status,
-        errorCategory: "too-large",
-        error: "The endpoint's reply was too large.",
-        durationMs: now() - startedAt,
-      };
-    }
-    if (!response.ok) {
-      return {
-        ok: false,
-        status: response.status,
-        errorCategory: "http-error",
-        // Deliberately not the response body: it is attacker-influenced text
-        // that would end up in an administrator's screen and the logs.
-        error: `The endpoint answered ${response.status}.`,
-        durationMs: now() - startedAt,
-      };
-    }
-    return { ok: true, status: response.status, durationMs: now() - startedAt };
-  } catch (caught) {
-    const aborted =
-      caught instanceof Error &&
-      (caught.name === "AbortError" || caught.message.includes("aborted"));
+  if (result.status < 200 || result.status >= 300) {
     return {
       ok: false,
-      errorCategory: aborted ? "timeout" : "network",
-      error: aborted
-        ? "The endpoint did not answer in time."
-        : "The endpoint could not be reached.",
-      durationMs: now() - startedAt,
+      status: result.status,
+      errorCategory: "http-error",
+      // Deliberately not the response body: it is attacker-influenced text
+      // that would end up in an administrator's screen and the logs.
+      error: `The endpoint answered ${result.status}.`,
+      durationMs,
     };
-  } finally {
-    clearTimeout(timer);
   }
+  return { ok: true, status: result.status, durationMs };
 }
 
 // ---------------------------------------------------------------------------

package/src/site/preview-messaging.ts

@@ -0,0 +1,232 @@
+/**
+ * The page builder's channel to its preview canvas.
+ *
+ * The builder renders the page being edited in an iframe (the preview route)
+ * and streams unsaved drafts into it; the canvas answers with a ready signal
+ * and block selections. The preview route is public, so its page can be
+ * opened or framed by anyone — a message that only *says* it comes from the
+ * builder proves nothing. Both ends therefore check who is talking:
+ *
+ * - the canvas accepts the builder's messages only from its own parent frame
+ *   (`event.source`), only from an expected origin (its own, plus any origin a
+ *   site explicitly names), and only in one builder session, in order;
+ * - the builder accepts the canvas's messages only from its own iframe's
+ *   window and the iframe's origin;
+ * - nothing is ever posted to `"*"`: every message names the origin that may
+ *   receive it, so unsaved drafts never reach a page that navigated elsewhere.
+ *
+ * Malformed, oversized, out-of-order and repeated messages are ignored.
+ */
+
+export const EDITOR_SOURCE = "lovable-editor";
+export const PREVIEW_SOURCE = "lovable-preview";
+
+/** Largest draft accepted, measured as JSON. A whole page with its globals is far smaller. */
+export const PREVIEW_MESSAGE_MAX_BYTES = 4 * 1024 * 1024;
+
+const MAX_ID = 200;
+const KEYS_THAT_ARE_NOT_DATA = new Set(["__proto__", "constructor", "prototype"]);
+
+export type EditorDraftMessage = {
+  source: typeof EDITOR_SOURCE;
+  session: string;
+  seq: number;
+  type: "draft";
+  blocks: unknown[];
+  globals: Record<string, unknown[]>;
+  selectedId: string | null;
+  locale?: string;
+  sharedContent?: Record<string, unknown>;
+};
+
+export type EditorScrollMessage = {
+  source: typeof EDITOR_SOURCE;
+  session: string;
+  seq: number;
+  type: "scrollTo";
+  blockId: string;
+};
+
+export type EditorMessage = EditorDraftMessage | EditorScrollMessage;
+
+export type PreviewMessage =
+  | { source: typeof PREVIEW_SOURCE; type: "ready" }
+  | { source: typeof PREVIEW_SOURCE; type: "select"; blockId: string };
+
+/** The parts of a `MessageEvent` the guards read. */
+export type IncomingMessage = { data: unknown; origin: string; source: unknown };
+
+/** A serialized origin (`https://host[:port]`), or null for anything else. */
+export function normalizeOrigin(value: string | null | undefined): string | null {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+    if (url.username || url.password) return null;
+    return url.origin;
+  } catch {
+    return null;
+  }
+}
+
+/** The origins the canvas trusts: its own first, then any the site names explicitly. */
+export function trustedEditorOrigins(own: string, extra: readonly string[] = []): string[] {
+  const out: string[] = [];
+  for (const value of [own, ...extra]) {
+    const origin = normalizeOrigin(value);
+    if (origin && !out.includes(origin)) out.push(origin);
+  }
+  return out;
+}
+
+/** The origin of the page the builder frames, resolved against the builder's address. */
+export function previewOriginOf(previewUrl: string, base: string): string | null {
+  try {
+    return normalizeOrigin(new URL(previewUrl, base).href);
+  } catch {
+    return null;
+  }
+}
+
+/** A fresh, unguessable builder session id. */
+export function newPreviewSession(): string {
+  const bytes = new Uint8Array(16);
+  globalThis.crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value) as unknown;
+  return proto === Object.prototype || proto === null;
+}
+
+function hasOnlyDataKeys(value: Record<string, unknown>): boolean {
+  return Object.keys(value).every((key) => !KEYS_THAT_ARE_NOT_DATA.has(key));
+}
+
+const isId = (value: unknown): value is string =>
+  typeof value === "string" && value.length > 0 && value.length <= MAX_ID;
+
+function sizeWithin(value: unknown, maxBytes: number): boolean {
+  try {
+    const json = JSON.stringify(value);
+    return typeof json === "string" && json.length <= maxBytes;
+  } catch {
+    return false;
+  }
+}
+
+/** The builder's message, checked for shape; null when it is not one. */
+export function parseEditorMessage(
+  data: unknown,
+  maxBytes = PREVIEW_MESSAGE_MAX_BYTES,
+): EditorMessage | null {
+  if (!isPlainObject(data) || data["source"] !== EDITOR_SOURCE) return null;
+  const session = data["session"];
+  const seq = data["seq"];
+  if (typeof session !== "string" || session.length < 16 || session.length > 128) return null;
+  if (typeof seq !== "number" || !Number.isSafeInteger(seq) || seq < 0) return null;
+  if (!sizeWithin(data, maxBytes)) return null;
+
+  if (data["type"] === "scrollTo") {
+    if (!isId(data["blockId"])) return null;
+    return { source: EDITOR_SOURCE, session, seq, type: "scrollTo", blockId: data["blockId"] };
+  }
+  if (data["type"] !== "draft") return null;
+
+  const blocks = data["blocks"];
+  const globals = data["globals"];
+  const selectedId = data["selectedId"] ?? null;
+  const locale = data["locale"];
+  const sharedContent = data["sharedContent"];
+  if (!Array.isArray(blocks)) return null;
+  if (!isPlainObject(globals) || !hasOnlyDataKeys(globals)) return null;
+  if (!Object.values(globals).every((value) => Array.isArray(value))) return null;
+  if (selectedId !== null && !isId(selectedId)) return null;
+  if (locale !== undefined && (typeof locale !== "string" || locale.length > 16)) return null;
+  if (sharedContent !== undefined && (!isPlainObject(sharedContent) || !hasOnlyDataKeys(sharedContent))) {
+    return null;
+  }
+  return {
+    source: EDITOR_SOURCE,
+    session,
+    seq,
+    type: "draft",
+    blocks,
+    globals: globals as Record<string, unknown[]>,
+    selectedId,
+    ...(locale !== undefined ? { locale: locale as string } : {}),
+    ...(sharedContent !== undefined ? { sharedContent } : {}),
+  };
+}
+
+/**
+ * The canvas's side: accepts the builder's messages from its parent frame and
+ * a trusted origin, in one session and in order.
+ */
+export function createEditorMessageGuard(options: {
+  trustedOrigins: readonly string[];
+  /** The window that framed the canvas (`window.parent`). */
+  parent: () => unknown;
+  /** The canvas's own window, to tell "not framed" apart. */
+  self: () => unknown;
+  maxBytes?: number;
+}) {
+  const trusted = new Set(options.trustedOrigins);
+  let session: string | null = null;
+  let lastSeq = -1;
+  let origin: string | null = null;
+
+  return {
+    accept(event: IncomingMessage): EditorMessage | null {
+      const parent = options.parent();
+      if (!parent || parent === options.self()) return null;
+      if (event.source !== parent) return null;
+      if (!trusted.has(event.origin)) return null;
+      if (origin !== null && event.origin !== origin) return null;
+      const message = parseEditorMessage(event.data, options.maxBytes);
+      if (!message) return null;
+      if (session !== null && message.session !== session) return null;
+      if (message.seq <= lastSeq) return null;
+      session = message.session;
+      origin = event.origin;
+      lastSeq = message.seq;
+      return message;
+    },
+    /** Where replies may go: the builder's verified origin, or every trusted one before it spoke. */
+    replyOrigins(): string[] {
+      return origin !== null ? [origin] : [...trusted];
+    },
+  };
+}
+
+/** The canvas's message, checked for shape; null when it is not one. */
+export function parsePreviewMessage(data: unknown): PreviewMessage | null {
+  if (!isPlainObject(data) || data["source"] !== PREVIEW_SOURCE) return null;
+  if (data["type"] === "ready") return { source: PREVIEW_SOURCE, type: "ready" };
+  if (data["type"] === "select" && isId(data["blockId"])) {
+    return { source: PREVIEW_SOURCE, type: "select", blockId: data["blockId"] };
+  }
+  return null;
+}
+
+/** The builder's side: accepts only its own iframe's messages, from the iframe's origin. */
+export function acceptPreviewMessage(
+  event: IncomingMessage,
+  options: { frame: unknown; previewOrigin: string | null },
+): PreviewMessage | null {
+  if (!options.frame || event.source !== options.frame) return null;
+  if (!options.previewOrigin || event.origin !== options.previewOrigin) return null;
+  return parsePreviewMessage(event.data);
+}
+
+/** Posts to each origin in turn; a window at any other origin receives nothing. */
+export function postToOrigins(
+  target: { postMessage: (message: unknown, targetOrigin: string) => void } | null | undefined,
+  message: unknown,
+  origins: readonly string[],
+): void {
+  if (!target) return;
+  for (const origin of origins) target.postMessage(message, origin);
+}

package/src/site/routes/preview-page.tsx

@@ -8,10 +8,16 @@
  * and draft store only.
  */
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState, type ComponentType } from "react";
+import { useEffect, useRef, useState, type ComponentType } from "react";
 
 import { LocaleProvider, isLocale, DEFAULT_LOCALE, type Locale } from "../../i18n";
 import type { BlockInstance } from "../../blocks/types";
+import {
+  createEditorMessageGuard,
+  postToOrigins,
+  PREVIEW_SOURCE,
+  trustedEditorOrigins,
+} from "../preview-messaging";
 
 export type PreviewDraftSnapshot = {
   blocks: BlockInstance[];
@@ -43,6 +49,12 @@ export type PreviewPageDeps = {
   /** Outline colour used for block hover/selection. */
   outlineColorVar?: string;
   copy?: { draft?: string; published?: string; loading?: string };
+  /**
+   * Origins other than the preview's own that may drive the canvas — only
+   * when the builder is served from a different origin than the site. The
+   * canvas otherwise listens only to a builder on its own origin.
+   */
+  trustedEditorOrigins?: readonly string[];
   /**
    * What a visitor would get, for the standalone Preview: a hook returning a
    * transform the site applies to the blocks it shows (booking links removed
@@ -79,17 +91,6 @@ const asIs = (
 ) => snapshot;
 const useAsIs = () => asIs;
 
-type DraftMsg = {
-  source: "lovable-editor";
-  type: "draft" | "scrollTo";
-  blocks: BlockInstance[];
-  globals: Record<string, BlockInstance[]>;
-  selectedId?: string | null;
-  blockId?: string;
-  locale?: string;
-  sharedContent?: Record<string, unknown>;
-};
-
 export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKey: string }> {
   const copy = {
     draft: deps.copy?.draft ?? "Draft preview — unsaved changes",
@@ -168,14 +169,23 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
       if (q && isLocale(q)) setLocale(q);
     }, []);
 
-    // Ready handshake plus draft/scroll messages from the editor.
+    // Ready handshake plus draft/scroll messages from the editor: only from
+    // the frame that embeds this canvas, on a trusted origin, in order (see
+    // preview-messaging). Replies name that origin; nothing goes to "*".
+    const replyOrigins = useRef<() => string[]>(() => []);
     useEffect(() => {
-      const send = (msg: unknown) =>
-        window.parent && window.parent !== window && window.parent.postMessage(msg, "*");
-      send({ source: "lovable-preview", type: "ready" });
+      const guard = createEditorMessageGuard({
+        trustedOrigins: trustedEditorOrigins(window.location.origin, deps.trustedEditorOrigins),
+        parent: () => window.parent,
+        self: () => window,
+      });
+      replyOrigins.current = () => guard.replyOrigins();
+      if (window.parent !== window) {
+        postToOrigins(window.parent, { source: PREVIEW_SOURCE, type: "ready" }, guard.replyOrigins());
+      }
       const onMsg = (ev: MessageEvent) => {
-        const data = ev.data as DraftMsg | undefined;
-        if (!data || data.source !== "lovable-editor") return;
+        const data = guard.accept(ev);
+        if (!data) return;
         if (data.type === "scrollTo") {
           const id = data.blockId;
           if (!id) return;
@@ -186,7 +196,6 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
           });
           return;
         }
-        if (data.type !== "draft") return;
         if (data.sharedContent && Object.keys(data.sharedContent).length) {
           queryClient.setQueryData(
             deps.sharedContentQueryKey,
@@ -196,9 +205,9 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
             }),
           );
         }
-        setBlocks(data.blocks);
-        setGlobals(data.globals);
-        setSelectedId(data.selectedId ?? null);
+        setBlocks(data.blocks as BlockInstance[]);
+        setGlobals(data.globals as Record<string, BlockInstance[]>);
+        setSelectedId(data.selectedId);
         if (data.locale && isLocale(data.locale)) setLocale(data.locale);
         setIsDraft(true);
         setReady(true);
@@ -221,13 +230,12 @@ export function createPreviewPage(deps: PreviewPageDeps): ComponentType<{ pageKe
         }
         e.preventDefault();
         e.stopPropagation();
-        window.parent.postMessage(
-          {
-            source: "lovable-preview",
-            type: "select",
-            blockId: el.getAttribute("data-block-id"),
-          },
-          "*",
+        const blockId = el.getAttribute("data-block-id");
+        if (!blockId) return;
+        postToOrigins(
+          window.parent,
+          { source: PREVIEW_SOURCE, type: "select", blockId },
+          replyOrigins.current(),
         );
       };
       document.addEventListener("click", onClick, true);

package/src/util/redact-url.ts

@@ -0,0 +1,18 @@
+/**
+ * An address as it may be stored or shown: its origin, and never its
+ * credentials, path, query string or fragment.
+ *
+ * Receivers put keys in paths (`/services/T…/B…/<key>`) as readily as in query
+ * strings, so whatever follows the origin is replaced by a fixed marker rather
+ * than trimmed. Pure, so audit code in the browser can use it too.
+ */
+export function redactUrl(raw: string | URL): string {
+  try {
+    const url = typeof raw === "string" ? new URL(raw) : raw;
+    if (url.origin === "null") return "(invalid address)";
+    const rest = url.pathname !== "/" || url.search !== "" || url.hash !== "";
+    return rest ? `${url.origin}/[redacted]` : url.origin;
+  } catch {
+    return "(invalid address)";
+  }
+}