@decocms/tanstack 7.20.8 → 7.20.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/tanstack",
-  "version": "7.20.8",
+  "version": "7.20.10",
   "type": "module",
   "description": "Deco framework binding for TanStack Start + Cloudflare Workers",
   "repository": {
@@ -24,9 +24,9 @@
     "lint:unused": "knip"
   },
   "dependencies": {
-    "@decocms/blocks": "7.20.8",
-    "@decocms/blocks-admin": "7.20.8",
-    "@decocms/blocks-cli": "7.20.8",
+    "@decocms/blocks": "7.20.10",
+    "@decocms/blocks-admin": "7.20.10",
+    "@decocms/blocks-cli": "7.20.10",
     "@deco-cx/warp-node": "^0.3.16",
     "fast-json-patch": "^3.1.0",
     "ws": "^8.18.0"

package/src/sdk/workerEntry.test.ts

@@ -1,10 +1,21 @@
 import { setBlocks } from "@decocms/blocks/cms";
 import { afterEach, describe, expect, it } from "vitest";
-import { buildGeoCacheParam, createDecoWorkerEntry, detectLocationMatcher, injectGeoCookies } from "./workerEntry";
+import {
+  buildGeoCacheParam,
+  createDecoWorkerEntry,
+  DECO_ADMIN_FRAME_ANCESTORS,
+  DEFAULT_FRAME_ANCESTORS_CSP,
+  DEFAULT_SECURITY_HEADERS,
+  detectLocationMatcher,
+  injectGeoCookies,
+} from "./workerEntry";
 import { __resetKvHydrationStateForTests } from "./kvHydration";
 
 const EMPTY_ENV = {};
-const MOCK_CTX = { waitUntil: (_p: Promise<unknown>) => {} };
+const MOCK_CTX = {
+  waitUntil: (_p: Promise<unknown>) => {},
+  passThroughOnException: () => {},
+};
 const MOCK_SERVER_ENTRY = {
   fetch: async (_req: Request) => new Response("page content", { status: 200 }),
 };
@@ -313,3 +324,64 @@ describe("CMS redirects", () => {
     expect(res2.headers.get("Location")).toBe("/v2");
   });
 });
+
+describe("security headers — frame-ancestors default", () => {
+  afterEach(() => {
+    __resetKvHydrationStateForTests();
+    setBlocks({});
+  });
+
+  const HTML_SERVER_ENTRY = {
+    fetch: async (_req: Request) =>
+      new Response("<html>hi</html>", {
+        status: 200,
+        headers: { "content-type": "text/html; charset=utf-8" },
+      }),
+  };
+
+  it("does NOT ship X-Frame-Options (frame-ancestors supersedes it)", () => {
+    expect(DEFAULT_SECURITY_HEADERS["X-Frame-Options"]).toBeUndefined();
+  });
+
+  it("allows the deco studio to embed the storefront by default", () => {
+    expect(DEFAULT_FRAME_ANCESTORS_CSP).toContain("frame-ancestors");
+    expect(DECO_ADMIN_FRAME_ANCESTORS).toContain("https://studio.decocms.com");
+    expect(DECO_ADMIN_FRAME_ANCESTORS).toContain("https://*.deco.studio");
+    expect(DECO_ADMIN_FRAME_ANCESTORS).toContain("'self'");
+  });
+
+  it("applies the default frame-ancestors CSP on HTML responses and drops X-Frame-Options", async () => {
+    const worker = createDecoWorkerEntry(HTML_SERVER_ENTRY);
+    const res = await worker.fetch(new Request("https://example.com/"), EMPTY_ENV, MOCK_CTX);
+    expect(res.headers.get("Content-Security-Policy")).toBe(DEFAULT_FRAME_ANCESTORS_CSP);
+    expect(res.headers.get("X-Frame-Options")).toBeNull();
+    // Other defaults are still present.
+    expect(res.headers.get("X-Content-Type-Options")).toBe("nosniff");
+  });
+
+  it("lets a site override the frame-ancestors CSP via securityHeaders", async () => {
+    const worker = createDecoWorkerEntry(HTML_SERVER_ENTRY, {
+      securityHeaders: { "Content-Security-Policy": "frame-ancestors 'none'" },
+    });
+    const res = await worker.fetch(new Request("https://example.com/"), EMPTY_ENV, MOCK_CTX);
+    expect(res.headers.get("Content-Security-Policy")).toBe("frame-ancestors 'none'");
+  });
+
+  it("emits the full site CSP report-only alongside the enforced frame-ancestors", async () => {
+    const worker = createDecoWorkerEntry(HTML_SERVER_ENTRY, {
+      csp: ["default-src 'self'", "img-src 'self' https:"],
+    });
+    const res = await worker.fetch(new Request("https://example.com/"), EMPTY_ENV, MOCK_CTX);
+    expect(res.headers.get("Content-Security-Policy")).toBe(DEFAULT_FRAME_ANCESTORS_CSP);
+    expect(res.headers.get("Content-Security-Policy-Report-Only")).toBe(
+      "default-src 'self'; img-src 'self' https:",
+    );
+  });
+
+  it("omits all security headers when securityHeaders is false", async () => {
+    const worker = createDecoWorkerEntry(HTML_SERVER_ENTRY, { securityHeaders: false });
+    const res = await worker.fetch(new Request("https://example.com/"), EMPTY_ENV, MOCK_CTX);
+    expect(res.headers.get("Content-Security-Policy")).toBeNull();
+    expect(res.headers.get("X-Content-Type-Options")).toBeNull();
+  });
+});

package/src/sdk/workerEntry.ts

@@ -331,10 +331,13 @@ export interface DecoWorkerEntryOptions {
    * Security headers appended to every SSR response (HTML pages).
    * Pass `false` to disable entirely.
    *
-   * Default headers: X-Content-Type-Options, X-Frame-Options, Referrer-Policy,
-   * Permissions-Policy, X-XSS-Protection, HSTS, Cross-Origin-Opener-Policy.
+   * Default headers: X-Content-Type-Options, Referrer-Policy,
+   * Permissions-Policy, X-XSS-Protection, HSTS, Cross-Origin-Opener-Policy,
+   * and a `Content-Security-Policy: frame-ancestors` directive that lets the
+   * deco admin/studio embed the storefront (see DEFAULT_FRAME_ANCESTORS_CSP).
    *
-   * Custom entries are merged with defaults (custom values take precedence).
+   * Custom entries are merged with defaults (custom values take precedence) —
+   * pass `Content-Security-Policy` here to override the default frame-ancestors.
    *
    * @default DEFAULT_SECURITY_HEADERS
    */
@@ -621,11 +624,19 @@ const ONE_YEAR = 31536000;
 
 /**
  * Sensible security headers for any production storefront.
- * CSP is intentionally not included — it's site-specific (third-party script domains).
+ *
+ * Framing protection is handled by a default `Content-Security-Policy:
+ * frame-ancestors` directive (see DEFAULT_FRAME_ANCESTORS_CSP), NOT
+ * `X-Frame-Options`. CSP level 3 `frame-ancestors` supersedes X-Frame-Options
+ * in every modern browser, and — unlike the all-or-nothing SAMEORIGIN value —
+ * it can allow the deco admin/studio to embed the storefront for live preview
+ * while still blocking arbitrary third-party framing (clickjacking).
+ *
+ * Full CSP (script-src etc.) is intentionally not included here — it's
+ * site-specific (third-party script domains) and passed via the `csp` option.
  */
 export const DEFAULT_SECURITY_HEADERS: Record<string, string> = {
   "X-Content-Type-Options": "nosniff",
-  "X-Frame-Options": "SAMEORIGIN",
   "Referrer-Policy": "strict-origin-when-cross-origin",
   "Permissions-Policy": "camera=(), microphone=(), geolocation=()",
   "X-XSS-Protection": "1; mode=block",
@@ -633,6 +644,28 @@ export const DEFAULT_SECURITY_HEADERS: Record<string, string> = {
   "Cross-Origin-Opener-Policy": "same-origin-allow-popups",
 };
 
+/**
+ * Origins allowed to embed the storefront in an iframe. These are the deco
+ * studio surfaces that render the live-preview iframe, plus `'self'` so the
+ * storefront can frame itself.
+ *
+ * A site can widen this by passing its own
+ * `securityHeaders["Content-Security-Policy"]`, or drop framing protection
+ * entirely with `securityHeaders: false`.
+ */
+export const DECO_ADMIN_FRAME_ANCESTORS: string[] = [
+  "'self'",
+  "https://studio.decocms.com",
+  "https://*.deco.studio",
+];
+
+/**
+ * Default enforcement CSP shipped on every SSR HTML response. Only the
+ * `frame-ancestors` directive is enforced by default; the full site CSP
+ * (passed via the `csp` option) is emitted report-only.
+ */
+export const DEFAULT_FRAME_ANCESTORS_CSP = `frame-ancestors ${DECO_ADMIN_FRAME_ANCESTORS.join(" ")}`;
+
 const DEFAULT_BYPASS_PATHS = ["/_build", "/deco/", "/live/", "/.decofile"];
 
 /**
@@ -879,6 +912,12 @@ export function createDecoWorkerEntry(
   const secHeaders: Record<string, string> | null = (() => {
     if (securityHeadersOpt === false) return null;
     const base = { ...DEFAULT_SECURITY_HEADERS };
+    // Ship an enforcement `frame-ancestors` CSP by default so the deco
+    // admin/studio can embed the storefront for live preview without every
+    // site copy-pasting the directive into its worker entry. A site can
+    // override the whole header via securityHeaders["Content-Security-Policy"]
+    // (the merge loop below wins) or disable all security headers with `false`.
+    base["Content-Security-Policy"] = DEFAULT_FRAME_ANCESTORS_CSP;
     if (securityHeadersOpt) {
       for (const [k, v] of Object.entries(securityHeadersOpt)) base[k] = v;
     }