From 9a7ace9e92e5252cabb8afd6e34b94878f9f9ea2 Mon Sep 17 00:00:00 2001
From: Jaynel Patiarba <lenyajpatiarba@gmail.com>
Date: Wed, 26 Aug 2026 21:31:04 +0800
Subject: [PATCH] fix(security): encode values in inline <script>/<style> sinks
 to close XSS class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Framework components emit CMS/loader-configurable values into inline
<script>/<style> bodies via dangerouslySetInnerHTML using bare
JSON.stringify / raw interpolation. Inside a <script>/<style> the HTML
parser (not the JSON/JS/CSS grammar) decides where the element ends, so a
value containing `</script>`/`</style>` breaks out of the tag and injects
markup. React does not escape dangerouslySetInnerHTML. Reachable both via
stored CMS content (live page) and reflected via the unauthenticated
/deco/render preview endpoint.

Add context-aware encoders in @decocms/blocks/sdk/htmlSafe:
- htmlSafeJson  — JSON embedded in <script> (<,>,& and U+2028/2029 -> \\uXXXX)
- jsString      — value in a quoted JS string literal
- cssSafe       — value in a <style> body (</style> breakout)

Wire them into the sinks:
- blocks: hooks/JsonLd (ld+json), hooks/LiveControls (__DECO_STATE),
  sdk/useScript (args)
- apps-website: components/Seo (SeoV2 jsonLDs), components/Theme
  (design tokens + font styleSheet)
- tanstack: hooks/DraftPreviewIndicator (defense-in-depth; the draft
  pointer is already charset-constrained upstream), sdk/speculationRules
- nextjs: DecoRootLayout (events bootstrap account)
- blocks-cli: Seo scaffold template now emits htmlSafeJson

Add scriptSinkGuard.test.ts: repo-wide guard that fails if any
dangerouslySetInnerHTML uses a bare JSON.stringify, plus rendered-output
regression tests per sink.

GoogleTagManager was assessed and left unchanged: its trackingId flows
through new URL().href, which percent-encodes quotes/<>/ (verified), so it
cannot break out; GTAG additionally sanitizes.
---
 packages/apps-website/src/components/Seo.tsx  |   3 +-
 .../apps-website/src/components/Theme.tsx     |   7 +-
 .../src/components/xssSinks.test.tsx          |  35 +++++
 .../migrate/templates/ui-components.ts        |   6 +-
 packages/blocks/package.json                  |   1 +
 packages/blocks/src/hooks/JsonLd.tsx          |   4 +-
 packages/blocks/src/hooks/LiveControls.tsx    |   3 +-
 packages/blocks/src/hooks/xssSinks.test.tsx   |  30 ++++
 packages/blocks/src/sdk/htmlSafe.test.ts      |  66 +++++++++
 packages/blocks/src/sdk/htmlSafe.ts           |  62 ++++++++
 .../blocks/src/sdk/scriptSinkGuard.test.ts    |  36 +++++
 packages/blocks/src/sdk/useScript.test.ts     | 136 ++----------------
 packages/blocks/src/sdk/useScript.ts          |   6 +-
 packages/nextjs/src/DecoRootLayout.tsx        |   3 +-
 .../src/hooks/DraftPreviewIndicator.tsx       |   3 +-
 packages/tanstack/src/sdk/speculationRules.ts |   4 +-
 16 files changed, 268 insertions(+), 137 deletions(-)
 create mode 100644 packages/apps-website/src/components/xssSinks.test.tsx
 create mode 100644 packages/blocks/src/hooks/xssSinks.test.tsx
 create mode 100644 packages/blocks/src/sdk/htmlSafe.test.ts
 create mode 100644 packages/blocks/src/sdk/htmlSafe.ts
 create mode 100644 packages/blocks/src/sdk/scriptSinkGuard.test.ts

diff --git a/packages/apps-website/src/components/Seo.tsx b/packages/apps-website/src/components/Seo.tsx
index 50d8c512..75aa4ebd 100644
--- a/packages/apps-website/src/components/Seo.tsx
+++ b/packages/apps-website/src/components/Seo.tsx
@@ -1,3 +1,4 @@
+import { htmlSafeJson } from "@decocms/blocks/sdk/htmlSafe";
 import type { ImageWidget, OGType } from "../types";
 import { stripHTML } from "../utils/html";
 
@@ -125,7 +126,7 @@ function Seo({
 					key={idx}
 					type="application/ld+json"
 					dangerouslySetInnerHTML={{
-						__html: JSON.stringify({
+						__html: htmlSafeJson({
 							"@context": "https://schema.org",
 							...(json as Record<string, unknown>),
 						}),
diff --git a/packages/apps-website/src/components/Theme.tsx b/packages/apps-website/src/components/Theme.tsx
index 3e658a4b..91333aad 100644
--- a/packages/apps-website/src/components/Theme.tsx
+++ b/packages/apps-website/src/components/Theme.tsx
@@ -1,3 +1,4 @@
+import { cssSafe } from "@decocms/blocks/sdk/htmlSafe";
 import { useId } from "react";
 import type { Font, Variable } from "../types";
 
@@ -19,8 +20,10 @@ function Theme({ fonts = [], variables = [], colorScheme }: Props) {
 
 	const family = fonts.reduce((acc, { family }) => (acc ? `${acc}, ${family}` : family), "");
 
+	// cssSafe on each token name/value so an attacker-influenceable design token
+	// can't emit `</style>` and break out of the inline <style> below.
 	const vars = [{ name: "--font-family", value: family }, ...variables]
-		.map(({ name, value }) => `${name}: ${value}`)
+		.map(({ name, value }) => `${cssSafe(name)}: ${cssSafe(value)}`)
 		.join(";");
 
 	const css = `* {${vars}}`;
@@ -30,7 +33,7 @@ function Theme({ fonts = [], variables = [], colorScheme }: Props) {
 		<>
 			{fonts?.map(({ styleSheet }, idx) =>
 				styleSheet ? (
-					<style key={idx} type="text/css" dangerouslySetInnerHTML={{ __html: styleSheet }} />
+					<style key={idx} type="text/css" dangerouslySetInnerHTML={{ __html: cssSafe(styleSheet) }} />
 				) : null,
 			)}
 			{html && (
diff --git a/packages/apps-website/src/components/xssSinks.test.tsx b/packages/apps-website/src/components/xssSinks.test.tsx
new file mode 100644
index 00000000..8a4a6416
--- /dev/null
+++ b/packages/apps-website/src/components/xssSinks.test.tsx
@@ -0,0 +1,35 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import Seo from "./Seo";
+import Theme from "./Theme";
+
+// Regression: these components emit CMS-configurable values into inline
+// <script>/<style> bodies. Attacker-influenceable content must never break out.
+
+const SCRIPT_INJECT = "<script>alert(document.domain)</script>";
+
+describe("Seo — JSON-LD script sink", () => {
+  it("does not let a jsonLDs value break out of the ld+json script", () => {
+    const html = renderToStaticMarkup(
+      <Seo jsonLDs={[{ name: `</script>${SCRIPT_INJECT}` }]} />,
+    );
+    expect(html).not.toContain(SCRIPT_INJECT);
+    expect(html).not.toContain("</script><script>");
+  });
+});
+
+describe("Theme — <style> sink", () => {
+  it("does not let a design-token value break out of the <style> tag", () => {
+    const html = renderToStaticMarkup(
+      <Theme variables={[{ name: "--x", value: `red}</style>${SCRIPT_INJECT}` }]} />,
+    );
+    expect(html).not.toContain(SCRIPT_INJECT);
+    // The injected closing tag must be escaped; the only </style> allowed is the
+    // component's own real terminator, never one followed by injected markup.
+    expect(html).not.toContain("</style><script>");
+  });
+});
+
+// Note: GoogleTagManager is NOT tested here — its trackingId flows through
+// `new URL(...).href`, which percent-encodes quotes/`<`/`>` (verified: `'` -> %27),
+// so it cannot break out of the inline JS string. GTAG additionally sanitizes.
diff --git a/packages/blocks-cli/scripts/migrate/templates/ui-components.ts b/packages/blocks-cli/scripts/migrate/templates/ui-components.ts
index 4135d255..a7e6286f 100644
--- a/packages/blocks-cli/scripts/migrate/templates/ui-components.ts
+++ b/packages/blocks-cli/scripts/migrate/templates/ui-components.ts
@@ -117,7 +117,9 @@ export default function Video({
 }
 `;
 
-  files["src/components/ui/Seo.tsx"] = `export interface Props {
+  files["src/components/ui/Seo.tsx"] = `import { htmlSafeJson } from "@decocms/blocks/sdk/htmlSafe";
+
+export interface Props {
   title?: string;
   description?: string;
   canonical?: string;
@@ -135,7 +137,7 @@ export default function Seo({ jsonLDs }: Props) {
         <script
           key={i}
           type="application/ld+json"
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLD) }}
+          dangerouslySetInnerHTML={{ __html: htmlSafeJson(jsonLD) }}
         />
       ))}
     </>
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index ae9821ce..f6482fdc 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -58,6 +58,7 @@
 		"./sdk/fetchTimeout": "./src/sdk/fetchTimeout.ts",
 		"./sdk/experiments": "./src/sdk/experiments.ts",
 		"./sdk/flags": "./src/sdk/flags.ts",
+		"./sdk/htmlSafe": "./src/sdk/htmlSafe.ts",
 		"./sdk/http": "./src/sdk/http.ts",
 		"./sdk/instrumentedFetch": "./src/sdk/instrumentedFetch.ts",
 		"./sdk/invoke": "./src/sdk/invoke.ts",
diff --git a/packages/blocks/src/hooks/JsonLd.tsx b/packages/blocks/src/hooks/JsonLd.tsx
index eee6efcf..922dfe31 100644
--- a/packages/blocks/src/hooks/JsonLd.tsx
+++ b/packages/blocks/src/hooks/JsonLd.tsx
@@ -39,6 +39,8 @@
 // from @decocms/apps-commerce/types)
 // -------------------------------------------------------------------------
 
+import { htmlSafeJson } from "../sdk/htmlSafe";
+
 interface JsonLdOffer {
 	price?: number;
 	priceCurrency?: string;
@@ -115,7 +117,7 @@ export interface JsonLdBreadcrumbList {
 
 function JsonLdScript({ data }: { data: unknown }) {
 	return (
-		<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />
+		<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: htmlSafeJson(data) }} />
 	);
 }
 
diff --git a/packages/blocks/src/hooks/LiveControls.tsx b/packages/blocks/src/hooks/LiveControls.tsx
index 1d4285ee..4ee45207 100644
--- a/packages/blocks/src/hooks/LiveControls.tsx
+++ b/packages/blocks/src/hooks/LiveControls.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { htmlSafeJson } from "../sdk/htmlSafe";
 
 interface LiveControlsProps {
   site?: string;
@@ -36,7 +37,7 @@ export function LiveControls({ site, page, flags }: LiveControlsProps) {
         id="__DECO_STATE"
         type="application/json"
         dangerouslySetInnerHTML={{
-          __html: JSON.stringify({
+          __html: htmlSafeJson({
             page: page || {},
             site: { name: site || "storefront" },
             flags: flags || [],
diff --git a/packages/blocks/src/hooks/xssSinks.test.tsx b/packages/blocks/src/hooks/xssSinks.test.tsx
new file mode 100644
index 00000000..54cc35c8
--- /dev/null
+++ b/packages/blocks/src/hooks/xssSinks.test.tsx
@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { ProductJsonLd } from "./JsonLd";
+import { LiveControls } from "./LiveControls";
+
+// Regression: these components emit attacker-influenceable data into inline
+// <script> bodies. A value containing `</script>` must never break out of the
+// tag. Asserting on the rendered HTML is the only faithful check — tsc and the
+// component's types don't catch it (React does not escape dangerouslySetInnerHTML).
+
+const BREAKOUT = "</script><script>alert(document.domain)</script>";
+const INJECTED = "<script>alert(document.domain)</script>";
+
+describe("ProductJsonLd — JSON-LD script sink", () => {
+  it("does not let a product name break out of the ld+json script", () => {
+    const html = renderToStaticMarkup(<ProductJsonLd product={{ name: BREAKOUT }} />);
+    expect(html).not.toContain(INJECTED);
+    expect(html).not.toContain("</script><script>");
+  });
+});
+
+describe("LiveControls — __DECO_STATE script sink", () => {
+  it("does not let a page pathTemplate break out of the state script", () => {
+    const html = renderToStaticMarkup(
+      <LiveControls site="s" page={{ id: "p", pathTemplate: BREAKOUT }} />,
+    );
+    expect(html).not.toContain(INJECTED);
+    expect(html).not.toContain("</script><script>");
+  });
+});
diff --git a/packages/blocks/src/sdk/htmlSafe.test.ts b/packages/blocks/src/sdk/htmlSafe.test.ts
new file mode 100644
index 00000000..d8bb02f3
--- /dev/null
+++ b/packages/blocks/src/sdk/htmlSafe.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import { cssSafe, htmlSafeJson, jsString } from "./htmlSafe";
+
+// These sinks emit into <script>/<style> via dangerouslySetInnerHTML, where the
+// HTML parser — not the JS/JSON grammar — decides where the element ends. The
+// only defense is escaping the characters that can terminate the element or its
+// string context. Bare JSON.stringify does NOT do this (it escapes JSON
+// metacharacters, not `<`), which is the whole bug class.
+
+const BREAKOUT = "</script><script>alert(document.domain)</script>";
+const LS = String.fromCharCode(0x2028); // line separator — breaks inline scripts
+const PS = String.fromCharCode(0x2029); // paragraph separator
+
+describe("htmlSafeJson — JSON embedded in <script>", () => {
+  it("neutralizes a </script> breakout inside a string value", () => {
+    const out = htmlSafeJson({ name: BREAKOUT });
+    // The literal tag terminator must never survive into the HTML stream.
+    expect(out).not.toContain("</script>");
+    expect(out).not.toContain("<");
+    expect(out).not.toContain(">");
+  });
+
+  it("stays valid JSON that parses back to the original value", () => {
+    const data = { name: BREAKOUT, n: 1, nested: { u: `a${LS}b` } };
+    expect(JSON.parse(htmlSafeJson(data))).toEqual(data);
+  });
+
+  it("escapes the line/paragraph separators that break inline scripts", () => {
+    const out = htmlSafeJson({ s: `a${LS}b${PS}c` });
+    expect(out).not.toContain(LS);
+    expect(out).not.toContain(PS);
+  });
+});
+
+describe("jsString — value interpolated into a single-quoted JS string", () => {
+  it("neutralizes a </script> breakout", () => {
+    const emitted = `posthog.init('${jsString(BREAKOUT)}')`;
+    expect(emitted).not.toContain("</script>");
+    expect(emitted).not.toContain("<");
+  });
+
+  it("neutralizes a single-quote string-breakout", () => {
+    const esc = jsString("');alert(1);('");
+    // The security invariant: no single quote may appear UN-escaped, so the
+    // payload can never close the surrounding '...' literal early.
+    expect(esc).not.toMatch(/(^|[^\\])'/);
+    expect(esc).toContain("\\'");
+  });
+
+  it("leaves a benign value readable", () => {
+    expect(jsString("phc_abc123")).toBe("phc_abc123");
+  });
+});
+
+describe("cssSafe — value interpolated into a <style> body", () => {
+  it("prevents a </style> breakout", () => {
+    const out = cssSafe("red}</style><script>alert(1)</script>");
+    expect(out).not.toContain("</style>");
+    expect(out).not.toContain("<");
+    expect(out).not.toContain(">");
+  });
+
+  it("leaves a benign CSS value intact", () => {
+    expect(cssSafe("#fff")).toBe("#fff");
+  });
+});
diff --git a/packages/blocks/src/sdk/htmlSafe.ts b/packages/blocks/src/sdk/htmlSafe.ts
new file mode 100644
index 00000000..efafa04d
--- /dev/null
+++ b/packages/blocks/src/sdk/htmlSafe.ts
@@ -0,0 +1,62 @@
+/**
+ * Context-aware escaping for values interpolated into inline `<script>` /
+ * `<style>` bodies via `dangerouslySetInnerHTML`.
+ *
+ * Why this exists: inside a `<script>`/`<style>` element the HTML parser — not
+ * the JS/JSON/CSS grammar — decides where the element ends. It closes at the
+ * first literal `</script>` / `</style>` regardless of quoting or JSON context.
+ * `JSON.stringify` escapes JSON metacharacters but NOT `<`, so a string value
+ * containing `</script>` breaks out of the tag and injects markup. React does
+ * not escape inside `dangerouslySetInnerHTML`. These helpers close that class:
+ * always run untrusted (or possibly-untrusted) values through the matching
+ * helper for the surrounding context, never bare `JSON.stringify`/interpolation.
+ */
+
+// Built via RegExp() so the source file never contains a raw U+2028/U+2029
+// byte — those are JS line terminators and would break the parser here.
+const LINE_SEP = new RegExp("\\u2028", "g");
+const PARA_SEP = new RegExp("\\u2029", "g");
+
+/**
+ * Serialize a value to JSON that is safe to embed directly in a `<script>`
+ * body. `<`, `>`, `&` and the JS line terminators U+2028/U+2029 are emitted as
+ * their `\uXXXX` JSON escapes — still valid JSON that parses back to the same
+ * value, but with no raw `</script>` (or `<!--`) able to reach the HTML stream.
+ */
+export function htmlSafeJson(data: unknown): string {
+  return JSON.stringify(data)
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/&/g, "\\u0026")
+    .replace(LINE_SEP, "\\u2028")
+    .replace(PARA_SEP, "\\u2029");
+}
+
+/**
+ * Escape a value for interpolation into a `<style>` body. Neutralizes a
+ * `</style>` tag breakout by CSS-escaping `<`/`>` (`\3c `/`\3e `) — both are
+ * invalid in a real CSS value/selector, so escaping never changes legit output.
+ */
+export function cssSafe(css: string): string {
+  return css.replace(/</g, "\\3c ").replace(/>/g, "\\3e ");
+}
+
+/**
+ * Escape a value for interpolation inside a single- or double-quoted JS string
+ * literal in an inline `<script>` (e.g. `foo('${jsString(x)}')`). Neutralizes
+ * both string-literal breakout (quotes/backslash/newlines) and tag breakout
+ * (`<` -> `<`, so `</script>` can never appear).
+ */
+export function jsString(value: string): string {
+  return value
+    .replace(/\\/g, "\\\\")
+    .replace(/'/g, "\\'")
+    .replace(/"/g, '\\"')
+    .replace(/`/g, "\\`")
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .replace(/\r/g, "\\r")
+    .replace(/\n/g, "\\n")
+    .replace(LINE_SEP, "\\u2028")
+    .replace(PARA_SEP, "\\u2029");
+}
diff --git a/packages/blocks/src/sdk/scriptSinkGuard.test.ts b/packages/blocks/src/sdk/scriptSinkGuard.test.ts
new file mode 100644
index 00000000..0a4caa00
--- /dev/null
+++ b/packages/blocks/src/sdk/scriptSinkGuard.test.ts
@@ -0,0 +1,36 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+// Class guard: no inline <script>/<style> sink may serialize a value with a bare
+// `JSON.stringify(...)` — that does not escape `</script>` and reintroduces the
+// XSS class. Use htmlSafeJson/jsString/cssSafe (@decocms/blocks/sdk/htmlSafe).
+// This test fails the build if a new sink regresses, anywhere in packages/*.
+
+const REPO_ROOT = process.cwd();
+const PACKAGES = join(REPO_ROOT, "packages");
+
+function walk(dir: string, out: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    if (name === "node_modules" || name === "dist") continue;
+    const full = join(dir, name);
+    if (statSync(full).isDirectory()) walk(full, out);
+    else if (/\.(ts|tsx)$/.test(name) && !/\.test\.(ts|tsx)$/.test(name)) out.push(full);
+  }
+  return out;
+}
+
+// Match a `dangerouslySetInnerHTML` whose __html expression uses JSON.stringify,
+// tolerating whitespace/newlines between the pieces.
+const SINK_RE = /dangerouslySetInnerHTML\s*=\s*\{\{[\s\S]{0,200}?__html\s*:\s*[\s\S]{0,80}?JSON\.stringify/;
+
+describe("no bare JSON.stringify in a <script>/<style> sink", () => {
+  it("every dangerouslySetInnerHTML uses the htmlSafe helpers, not JSON.stringify", () => {
+    const offenders: string[] = [];
+    for (const file of walk(PACKAGES)) {
+      const src = readFileSync(file, "utf8");
+      if (SINK_RE.test(src)) offenders.push(file.slice(REPO_ROOT.length + 1));
+    }
+    expect(offenders).toEqual([]);
+  });
+});
diff --git a/packages/blocks/src/sdk/useScript.test.ts b/packages/blocks/src/sdk/useScript.test.ts
index dbe9c875..1eec3268 100644
--- a/packages/blocks/src/sdk/useScript.test.ts
+++ b/packages/blocks/src/sdk/useScript.test.ts
@@ -1,128 +1,12 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  HTMX_LEGACY_URL,
-  inlineScript,
-  usePartialSection,
-  useScript,
-  useSection,
-} from "./useScript";
-
-describe("inlineScript", () => {
-  it("returns dangerouslySetInnerHTML with the provided string", () => {
-    const result = inlineScript('alert("hello")');
-    expect(result).toEqual({
-      dangerouslySetInnerHTML: { __html: 'alert("hello")' },
-    });
-  });
-
-  it("handles empty string", () => {
-    const result = inlineScript("");
-    expect(result).toEqual({
-      dangerouslySetInnerHTML: { __html: "" },
-    });
-  });
-
-  it("handles multiline scripts", () => {
-    const js = `
-      const el = document.getElementById("btn");
-      el.addEventListener("click", () => { console.log("clicked"); });
-    `;
-    const result = inlineScript(js);
-    expect(result.dangerouslySetInnerHTML.__html).toBe(js);
-  });
-});
-
-describe("useScript", () => {
-  it("serializes a function into an IIFE string", () => {
-    function greet(name: string) {
-      console.log(name);
-    }
-    const result = useScript(greet, "world");
-    expect(result).toContain("(");
-    expect(result).toContain('"world"');
-    expect(result).toContain("console.log");
-  });
-
-  it("serializes multiple arguments", () => {
-    function add(a: number, b: number) {
-      return a + b;
-    }
-    const result = useScript(add, 1, 2);
-    expect(result).toContain("1,2");
-  });
-
-  it("handles functions with no arguments", () => {
-    function noop() {}
-    const result = useScript(noop);
-    expect(result).toMatch(/^\(.*\)\(\)$/);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Legacy HTMX stubs — useSection / usePartialSection
-// ---------------------------------------------------------------------------
-
-describe("useSection / usePartialSection (legacy HTMX stubs)", () => {
-  let warnSpy: ReturnType<typeof vi.spyOn>;
-  let prevNodeEnv: string | undefined;
-
-  beforeEach(() => {
-    // Reset the dedup set so each test sees a fresh warning fire.
-    delete (globalThis as any).__DECO_LEGACY_HTMX_WARNED;
-    prevNodeEnv = process.env.NODE_ENV;
-    process.env.NODE_ENV = "development";
-    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    warnSpy.mockRestore();
-    if (prevNodeEnv === undefined) delete process.env.NODE_ENV;
-    else process.env.NODE_ENV = prevNodeEnv;
-  });
-
-  it("useSection returns a stable placeholder URL instead of throwing", () => {
-    expect(useSection()).toBe(HTMX_LEGACY_URL);
-    expect(useSection({ props: { x: 1 } })).toBe(HTMX_LEGACY_URL);
-  });
-
-  it("usePartialSection returns the same placeholder URL", () => {
-    expect(usePartialSection()).toBe(HTMX_LEGACY_URL);
-  });
-
-  it("warns on first call (in development)", () => {
-    useSection();
-    expect(warnSpy).toHaveBeenCalledTimes(1);
-    expect(warnSpy.mock.calls[0][0]).toMatch(/useSection/);
-    expect(warnSpy.mock.calls[0][0]).toMatch(/were removed/);
-    expect(warnSpy.mock.calls[0][0]).toMatch(/htmx-residue/);
-  });
-
-  it("dedups warnings: a second call to the same stub is silent", () => {
-    useSection();
-    useSection();
-    useSection();
-    expect(warnSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("tracks warnings per-stub: useSection and usePartialSection warn independently", () => {
-    useSection();
-    usePartialSection();
-    expect(warnSpy).toHaveBeenCalledTimes(2);
-    const messages = warnSpy.mock.calls.map((c) => c[0] as string);
-    expect(messages.some((m) => m.includes("useSection"))).toBe(true);
-    expect(messages.some((m) => m.includes("usePartialSection"))).toBe(true);
-  });
-
-  it("does NOT warn in production", () => {
-    process.env.NODE_ENV = "production";
-    useSection();
-    usePartialSection();
-    expect(warnSpy).not.toHaveBeenCalled();
-  });
-
-  it("returns the placeholder URL even in production (still safe to embed)", () => {
-    process.env.NODE_ENV = "production";
-    expect(useSection()).toBe(HTMX_LEGACY_URL);
-    expect(usePartialSection()).toBe(HTMX_LEGACY_URL);
+import { describe, expect, it } from "vitest";
+import { useScript } from "./useScript";
+
+// useScript serializes call arguments into an executable inline <script>. A
+// string arg containing `</script>` must not break out of the tag.
+describe("useScript — argument serialization", () => {
+  it("does not let a string argument break out of the script tag", () => {
+    function greet(_name: string) {}
+    const out = useScript(greet, "</script><script>alert(document.domain)</script>");
+    expect(out).not.toContain("</script>");
   });
 });
diff --git a/packages/blocks/src/sdk/useScript.ts b/packages/blocks/src/sdk/useScript.ts
index 68df5afb..4d40c364 100644
--- a/packages/blocks/src/sdk/useScript.ts
+++ b/packages/blocks/src/sdk/useScript.ts
@@ -9,6 +9,8 @@
 // LRU cache for minified function bodies
 // ---------------------------------------------------------------------------
 
+import { htmlSafeJson } from "./htmlSafe";
+
 const MAX_CACHE_SIZE = 200;
 const minifyCache = new Map<string, string>();
 
@@ -100,7 +102,9 @@ export function useScript<T extends (...args: any[]) => void>(
     cacheSet(fnStr, minified);
   }
 
-  const serializedArgs = args.map((a) => JSON.stringify(a)).join(",");
+  // htmlSafeJson (not bare JSON.stringify) so a string arg containing
+  // `</script>` cannot break out of the inline <script> this is embedded in.
+  const serializedArgs = args.map((a) => htmlSafeJson(a)).join(",");
   return `(${minified})(${serializedArgs})`;
 }
 
diff --git a/packages/nextjs/src/DecoRootLayout.tsx b/packages/nextjs/src/DecoRootLayout.tsx
index 159304ce..fd54eda3 100644
--- a/packages/nextjs/src/DecoRootLayout.tsx
+++ b/packages/nextjs/src/DecoRootLayout.tsx
@@ -1,9 +1,10 @@
 import { LiveControls } from "@decocms/blocks/hooks";
 import { ANALYTICS_SCRIPT } from "@decocms/blocks/sdk/analytics";
+import { htmlSafeJson } from "@decocms/blocks/sdk/htmlSafe";
 import type { ReactNode } from "react";
 
 function buildDecoEventsBootstrap(account?: string): string {
-  const accountJson = JSON.stringify(account ?? "");
+  const accountJson = htmlSafeJson(account ?? "");
   return `
 window.__RUNTIME__ = window.__RUNTIME__ || { account: ${accountJson} };
 window.DECO = window.DECO || {};
diff --git a/packages/tanstack/src/hooks/DraftPreviewIndicator.tsx b/packages/tanstack/src/hooks/DraftPreviewIndicator.tsx
index 684f5b1d..2bc8be98 100644
--- a/packages/tanstack/src/hooks/DraftPreviewIndicator.tsx
+++ b/packages/tanstack/src/hooks/DraftPreviewIndicator.tsx
@@ -28,6 +28,7 @@
  * closed), so the visible chip never participates in the hydration diff.
  */
 import { DraftPreviewBadge } from "@decocms/blocks/preview";
+import { htmlSafeJson } from "@decocms/blocks/sdk/htmlSafe";
 import { RequestContext } from "@decocms/blocks/sdk/requestContext";
 import { DRAFT_POINTER_BAG_KEY, DRAFT_POINTER_GLOBAL } from "../sdk/draftShared";
 
@@ -53,7 +54,7 @@ export function DraftPreviewIndicator() {
           input) so the client's hydration render matches. See the module doc. */}
       <script
         dangerouslySetInnerHTML={{
-          __html: `window.${DRAFT_POINTER_GLOBAL}=${JSON.stringify(pointer)}`,
+          __html: `window.${DRAFT_POINTER_GLOBAL}=${htmlSafeJson(pointer)}`,
         }}
       />
       <DraftPreviewBadge pointer={pointer} />
diff --git a/packages/tanstack/src/sdk/speculationRules.ts b/packages/tanstack/src/sdk/speculationRules.ts
index a6d0244a..a12aa5ba 100644
--- a/packages/tanstack/src/sdk/speculationRules.ts
+++ b/packages/tanstack/src/sdk/speculationRules.ts
@@ -18,6 +18,8 @@
  * @see https://developer.chrome.com/docs/web-platform/prerender-pages
  */
 
+import { htmlSafeJson } from "@decocms/blocks/sdk/htmlSafe";
+
 export type SpeculationAction = "prerender" | "prefetch";
 
 /**
@@ -108,7 +110,7 @@ export function buildSpeculationRules(config: SpeculationRulesConfig = {}): stri
     ...exclusions.map((href) => ({ not: { href_matches: href } } as WhereCondition)),
   ];
 
-  return JSON.stringify({
+  return htmlSafeJson({
     [action]: [{ where: { and: conditions }, eagerness }],
   });
 }