@decocms/nextjs 7.34.0 → 7.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/nextjs",
-  "version": "7.34.0",
+  "version": "7.34.2",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -29,8 +29,8 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.34.0",
-    "@decocms/blocks-admin": "7.34.0"
+    "@decocms/blocks": "7.34.2",
+    "@decocms/blocks-admin": "7.34.2"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/draft.ts

@@ -29,11 +29,11 @@ import {
 } from "@decocms/blocks/cms";
 import { cookies, headers } from "next/headers";
 import { cache } from "react";
-import { DRAFT_COOKIE, DRAFT_PARAM } from "./draftConstants";
+import { DRAFT_COOKIE, DRAFT_HEADER, DRAFT_PARAM } from "./draftConstants";
 
 // Re-exported for back-compat: these used to live here, but the client badge
 // needs DRAFT_PARAM and cannot import this module (it pulls in `next/headers`).
-export { DRAFT_COOKIE, DRAFT_PARAM } from "./draftConstants";
+export { DRAFT_COOKIE, DRAFT_HEADER, DRAFT_PARAM } from "./draftConstants";
 
 /**
  * Request-scoped slot.
@@ -124,15 +124,21 @@ export function selectDraftPointer(
 export async function ensureDraft(searchParams?: DraftSearchParams): Promise<boolean> {
   registerDraftOverride();
 
-  const cookieStore = await cookies();
-  const pointer = selectDraftPointer(searchParams, cookieStore.get(DRAFT_COOKIE)?.value);
+  const [cookieStore, requestHeaders] = await Promise.all([cookies(), headers()]);
+
+  // Pointer precedence: the page's own `?__draft=` param wins; then the
+  // middleware-forwarded header (the only source a LAYOUT can see on the entry
+  // request — see DRAFT_HEADER); then the navigation cookie. This is what lets
+  // `ensureDraft()` bind from a layout so shell-resolved Header/Footer reflect
+  // the draft, not just page sections.
+  const carried = requestHeaders.get(DRAFT_HEADER) ?? cookieStore.get(DRAFT_COOKIE)?.value ?? null;
+  const pointer = selectDraftPointer(searchParams, carried);
   if (!pointer) return false;
 
   // Host gate, checked only once a pointer exists (headers() is a dynamic
   // API): the same build may serve the preview domain and the production
   // domain, and only hosts named in DECO_ALLOWED_PREVIEW_HOSTS may render
   // drafts — production stays published no matter what the URL carries.
-  const requestHeaders = await headers();
   const host = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host");
   if (!isDraftHostAllowed(host)) return false;
 

package/src/draftConstants.ts

@@ -13,3 +13,18 @@ export const DRAFT_PARAM = "__draft";
 
 /** Cookie that carries the pointer across in-preview navigation. */
 export const DRAFT_COOKIE = "__deco_draft";
+
+/**
+ * Request header the middleware forwards the active pointer on, so the whole
+ * RSC tree — including the root layout / app shell — can bind the draft on the
+ * SAME request. The page reads `?__draft=` from its own `searchParams`, but a
+ * layout never receives `searchParams` and, on the entry request, the cookie
+ * has only just been set on the *response* (not yet readable). Forwarding the
+ * pointer as a request header closes both gaps so `ensureDraft()` works from a
+ * layout, letting shell-resolved Header/Footer reflect the draft too.
+ *
+ * Not a new trust surface: the pointer was never a secret (the draft id is the
+ * capability, host-scoping bounds blast radius — see `draftSource`), so a
+ * forwarded/forged header is equivalent to typing the query param.
+ */
+export const DRAFT_HEADER = "x-deco-draft";

package/src/draftMiddleware.test.ts

@@ -2,7 +2,12 @@ import { NextRequest, NextResponse } from "next/server";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
 import { DRAFT_COOKIE } from "./draft";
-import { applyDraft, prepareDraft, rewriteToDraftRoute } from "./draftMiddleware";
+import {
+  applyDraft,
+  draftRequestHeaders,
+  prepareDraft,
+  rewriteToDraftRoute,
+} from "./draftMiddleware";
 
 beforeEach(() => {
   // The middleware is host-gated; these tests run as the allowed host.
@@ -48,9 +53,12 @@ describe("prepareDraft", () => {
     expect(rewriteToDraftRoute(req, prepareDraft(req))).toBeNull();
   });
 
-  it("ignores a client-supplied draft header — the page owns the decision", () => {
-    // There is no request-header path any more; the page reads searchParams
-    // and cookies itself, so a forged header is simply not an input.
+  it("does not read a client-supplied draft header — the decision is param/cookie only", () => {
+    // The forwarded `x-deco-draft` header (read by `ensureDraft` in the layout)
+    // is an OUTPUT of the middleware decision, never an input to it: prepareDraft
+    // still decides purely from the param + cookie. A client that forges the
+    // header directly can't manufacture a decision here (and `draftRequestHeaders`
+    // strips it when not previewing).
     const req = new NextRequest(new URL("https://site.example/p"), {
       headers: { "x-deco-draft": "attacker.localhost@v1" },
     });
@@ -58,6 +66,30 @@ describe("prepareDraft", () => {
   });
 });
 
+describe("draftRequestHeaders", () => {
+  it("forwards the active pointer on x-deco-draft so a layout can bind it", () => {
+    const req = request("https://site.example/p?__draft=abc.localhost@v1");
+    const headers = draftRequestHeaders(req, prepareDraft(req));
+    expect(headers.get("x-deco-draft")).toBe("abc.localhost@v1");
+  });
+
+  it("forwards the cookie-carried pointer on plain navigation", () => {
+    const req = request("https://site.example/p", "abc.localhost@v1");
+    const headers = draftRequestHeaders(req, prepareDraft(req));
+    expect(headers.get("x-deco-draft")).toBe("abc.localhost@v1");
+  });
+
+  it("strips a client-forged header when the request is not previewing", () => {
+    // Direct-to-origin request carrying a forged header but no real pointer:
+    // the forwarded headers must not carry it downstream.
+    const req = new NextRequest(new URL("https://site.example/p"), {
+      headers: { "x-deco-draft": "attacker.localhost@v1" },
+    });
+    const headers = draftRequestHeaders(req, prepareDraft(req));
+    expect(headers.get("x-deco-draft")).toBeNull();
+  });
+});
+
 describe("applyDraft", () => {
   it("sets a partitioned cross-site cookie when entering draft mode", () => {
     const decision = prepareDraft(request("https://site.example/p?__draft=abc.localhost@v1"));

package/src/draftMiddleware.ts

@@ -25,6 +25,7 @@ import { type NextRequest, NextResponse } from "next/server";
 import {
   DRAFT_COOKIE,
   DRAFT_COOKIE_OPTIONS,
+  DRAFT_HEADER,
   type DraftMiddlewareDecision,
   decideDraft,
 } from "./draft";
@@ -127,10 +128,36 @@ export function applyDraft(
 }
 
 /**
- * Convenience for sites with no middleware of their own: prepare, continue,
- * apply. Sites that already have middleware should call the two halves
- * directly so their own logic sits in between.
+ * Request headers to forward downstream, carrying the active pointer on
+ * `x-deco-draft` (see {@link DRAFT_HEADER}) so the RSC tree — including the app
+ * shell — can bind the draft via `ensureDraft()` and reflect it in
+ * shell-resolved Header/Footer, not only page sections.
+ *
+ * Pass to `NextResponse.next({ request: { headers } })`. Strips any
+ * client-supplied `x-deco-draft` when this request is not previewing, so the
+ * header is only ever present on a legitimately-gated preview request.
+ */
+export function draftRequestHeaders(
+  request: NextRequest,
+  decision: DraftMiddlewareDecision,
+): Headers {
+  const headers = new Headers(request.headers);
+  if (decision.pointer) headers.set(DRAFT_HEADER, decision.pointer);
+  else headers.delete(DRAFT_HEADER);
+  return headers;
+}
+
+/**
+ * Convenience for sites with no middleware of their own: prepare, forward the
+ * pointer header, continue, apply. Sites that already have middleware should
+ * call the halves directly (`prepareDraft` → `draftRequestHeaders` on the
+ * `NextResponse.next({ request: { headers } })` → `applyDraft`) so their own
+ * logic sits in between.
  */
 export function draftMiddleware(request: NextRequest): NextResponse {
-  return applyDraft(NextResponse.next(), prepareDraft(request));
+  const decision = prepareDraft(request);
+  const response = NextResponse.next({
+    request: { headers: draftRequestHeaders(request, decision) },
+  });
+  return applyDraft(response, decision);
 }

package/src/draftShell.test.ts

@@ -0,0 +1,72 @@
+/**
+ * `ensureDraft()` must bind from the middleware-forwarded `x-deco-draft` header
+ * — the only pointer source a LAYOUT (app shell) can see: it receives no
+ * `searchParams`, and on the entry request the cookie has only just been set on
+ * the response. This is what lets shell-resolved Header/Footer reflect a draft,
+ * not just page sections.
+ */
+import { clearDraftCache } from "@decocms/blocks/cms";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mutable header/cookie state the mock reads, so each test drives its own.
+let headerState = new Headers();
+let cookieState: Record<string, string> = {};
+
+vi.mock("next/headers", () => ({
+  headers: async () => headerState,
+  cookies: async () => ({
+    get: (name: string) => (name in cookieState ? { name, value: cookieState[name] } : undefined),
+  }),
+}));
+
+const { ensureDraft, DRAFT_HEADER, DRAFT_COOKIE } = await import("./draft");
+
+const DRAFT_BLOCKS = { "pages-home": { title: "DRAFT" } };
+const POINTER = "abc.localhost:60534@v1";
+
+beforeEach(() => {
+  headerState = new Headers({ host: "site.example" });
+  cookieState = {};
+  process.env.DECO_ALLOWED_PREVIEW_HOSTS = "site.example";
+  clearDraftCache();
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string) => {
+      if (String(url) === "http://abc.localhost:60534/_sandbox/decofile") {
+        return new Response(JSON.stringify(DRAFT_BLOCKS), {
+          status: 200,
+          headers: { "content-type": "application/json" },
+        });
+      }
+      throw new Error(`unexpected fetch: ${url}`);
+    }),
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  delete process.env.DECO_ALLOWED_PREVIEW_HOSTS;
+});
+
+describe("ensureDraft — app-shell (layout) binding via the forwarded header", () => {
+  it("binds the draft from x-deco-draft with no searchParams (the layout case)", async () => {
+    headerState.set(DRAFT_HEADER, POINTER);
+    // No searchParams (layouts get none) and no cookie (entry request).
+    expect(await ensureDraft()).toBe(true);
+  });
+
+  it("still binds from the cookie when there is no forwarded header", async () => {
+    cookieState[DRAFT_COOKIE] = POINTER;
+    expect(await ensureDraft()).toBe(true);
+  });
+
+  it("does not bind when neither header, cookie, nor param is present", async () => {
+    expect(await ensureDraft()).toBe(false);
+  });
+
+  it("stays gated by the host allowlist even with a forwarded header", async () => {
+    headerState = new Headers({ host: "prod.example" });
+    headerState.set(DRAFT_HEADER, POINTER);
+    expect(await ensureDraft()).toBe(false);
+  });
+});

package/src/index.ts

@@ -18,6 +18,7 @@ export { DraftPreviewIndicator } from "./DraftPreviewIndicator";
 export {
   DRAFT_COOKIE,
   DRAFT_COOKIE_OPTIONS,
+  DRAFT_HEADER,
   DRAFT_PARAM,
   type DraftMiddlewareDecision,
   type DraftSearchParams,
@@ -30,6 +31,7 @@ export {
 export {
   applyDraft,
   DRAFT_ROUTE_PREFIX,
+  draftRequestHeaders,
   prepareDraft,
   rewriteToDraftRoute,
 } from "./draftMiddleware";