Next.js 15 RSC Streaming Lexical Boundary & Cryptographic Nonce Isolation

Q: How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (Unsanitized inline script emission and missing nonce binding in dynamic RSC streaming blocks) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q: Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q: Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.

Next.js 15 RSC Streaming Lexical Boundary & Cryptographic Nonce Isolation

--- description: Next.js 15 RSC Streaming Lexical Boundary & Cryptographic Nonce Isolation - Enforces strict cryptographic nonce propagation and lexical boundary escaping on asynchronously streamed React Server Component (RSC) HTML chunks. Prevents DOM clobbering and arbitrary script execution caused by premature lexical breakout or unescaped tag delimiters injected into the downstream streaming pipe. globs: app/**/*.{ts,tsx}, src/app/**/*.{ts,tsx}, middleware.ts, src/middleware.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/nextjs15-rsc-streaming-injection-nonce-isolation" --- # Next.js 15 RSC Streaming Lexical Boundary & Cryptographic Nonce Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Unsanitized inline script emission and missing nonce binding in dynamic RSC streaming blocks ## System Constraints You are a Principal Security Architect enforcing Next.js 15 Server-Inserted HTML Streaming Injection Sanitization. Mandate strict cryptographic CSP nonce propagation, safe serialization via unicode escaping against lexical breakout (e.g., closing script tags, CDATA, XML comments), and neutralization of DOM clobbering attack vectors targeting window and document namespaces during asynchronous RSC hydration. ## Strict Guidelines - Engineers MUST ALWAYS extract the cryptographically generated Content-Security-Policy (CSP) nonce from request headers via `headers()` in server components before rendering inline executable fragments. - Engineers MUST NOT emit raw `<script>` tags or unescaped JSON data blobs into streamed RSC boundaries using `dangerouslySetInnerHTML` without unicode-escaping lexical boundary characters (`<`, `>`, `/`, `&`, `\u2028`, `\u2029`). - Code MUST sanitize JSON payloads inserted into streaming chunks by replacing characters that allow lexical breakout: serialize via `JSON.stringify` followed by regex substitution (`/<(\/?script|[!\-?])/gi`) or standard safe serialization libraries (e.g., `devalue`). - Services MUST enforce Content Security Policy headers in `middleware.ts` with strict dynamic nonces (`'nonce-${nonce}'`), `'strict-dynamic'`, and omit `'unsafe-inline'`. - Components NEVER accept user-controlled values as HTML attributes that mirror DOM properties (such as `id`, `name`, `currentScript`, `document`, or `window`) without a strict safe prefix to prevent DOM Clobbering during progressive RSC hydration. ## Bad vs Good Implementations ### Streaming Hydration Payload: Unsafe Raw Script vs. Nonce-Bound Lexically Escaped Chunk #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Directly injecting JSON.stringify into an inline script tag inside an RSC stream allows `</script>` breakouts and HTML comment transitions. It omits the cryptographic CSP nonce, breaking CSP level 3 strict-dynamic invariants and permitting DOM clobbering via malicious input keys. ```typescript import { headers } from 'next/headers'; interface StreamedPayloadProps { telemetryData: Record<string, unknown>; componentId: string; } // VULNERABLE: Direct string interpolation without lexical boundary sanitization or nonce validation. // An attacker providing telemetryData with `</script><img id="currentScript" src=x onerror=...>` // breaks out of the streaming context and clobbers `document.currentScript`. export async function StreamedMetadataChunk({ telemetryData, componentId }: StreamedPayloadProps) { const rawJson = JSON.stringify(telemetryData); return ( <div id={componentId}> <script dangerouslySetInnerHTML={{ __html: `window.__STREAMED_DATA__ = ${rawJson};`, }} /> </div> ); } ``` #### Production Standard (Correct) > **Standard**: Validates the cryptographic nonce from request headers, prevents script breakout by unicode-escaping critical lexical tokens (`<`, `>`, `&`), namespaces the DOM ID to neutralize DOM clobbering, and freezes the injected payload. ```typescript import { headers } from 'next/headers'; interface StreamedPayloadProps { telemetryData: Record<string, unknown>; componentId: string; } /** * Safely serializes data for inline script execution within streaming RSC chunks, * escaping HTML-sensitive characters to prevent lexical breakout and clobbering. */ function serializeSafeForScript(data: unknown): string { return JSON.stringify(data) .replace(/</g, '\\u003c') .replace(/>/g, '\\u003e') .replace(/&/g, '\\u0026') .replace(/\u2028/g, '\\u2028') .replace(/\u2029/g, '\\u2029'); } export async function StreamedMetadataChunk({ telemetryData, componentId }: StreamedPayloadProps) { const headerList = await headers(); const nonce = headerList.get('x-nonce') ?? undefined; if (!nonce && process.env.NODE_ENV === 'production') { throw new Error('Cryptographic CSP nonce is mandatory for streamed inline script chunks.'); } // Prevent DOM clobbering by strictly namespacing identifiers const safeDomId = `__rsc_chunk_${componentId.replace(/[^a-zA-Z0-9_-]/g, '')}`; const safeSerializedData = serializeSafeForScript(telemetryData); return ( <div id={safeDomId}> <script nonce={nonce} dangerouslySetInnerHTML={{ __html: `Object.defineProperty(window, '__STREAMED_DATA__', { value: Object.freeze(${safeSerializedData}), writable: false, configurable: false });`, }} /> </div> ); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Next.js 15 RSC Streaming Lexical Boundary & Cryptographic Nonce Isolation

Next.js 15 RSC Streaming Lexical Boundary & Cryptographic Nonce Isolation defines an industrial-grade behavioral standard for frontend engineering. Enforces strict cryptographic nonce propagation and lexical boundary escaping on asynchronously streamed React Server Component (RSC) HTML chunks. Prevents DOM clobbering and arbitrary script execution caused by premature lexical breakout or unescaped tag delimiters injected into the downstream streaming pipe. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Unsanitized inline script emission and missing nonce binding in dynamic RSC streaming blocks Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Unsanitized inline script emission and missing nonce binding in dynamic RSC streaming blocks	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS extract the cryptographically generated Content-Security-Policy (CSP) nonce from request headers via `headers()` in server components before rendering inline executable fragments.

Engineers MUST ALWAYS extract the cryptographically generated Content-Security-Policy (CSP) nonce from request headers via `headers()` in server components before rendering inline executable fragments.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.