React 19 Flight Payload PII & Secret Sanitization Guardrail

--- description: React 19 Flight Payload PII & Secret Sanitization Guardrail - Enforces strict boundary contracts between React 19 Server Components and Client Components to prevent secret and PII leakage over the wire. The React Flight serialization protocol sends raw prop values and bound Server Action closures directly to the browser DOM/network tab. This standard mandates explicit DTO projection, zero-spread object passing across client boundaries, and active use of React 19 taint APIs. globs: app/**/*.{ts,tsx}, src/**/*.{ts,tsx} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/react19-flight-payload-pii-sanitization-guardrail" --- # React 19 Flight Payload PII & Secret Sanitization Guardrail > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Passing Unsanitized Server Entities, Direct ORM Models, or Closed-Over Secrets Across the RSC-to-Client Flight Serialization Boundary ## System Constraints You are a Principal Security Architect enforcing React 19 Server Components Flight Payload PII Sanitization. In React 19, any prop passed from a Server Component to a Client Component ('use client') or bound to a Server Action is serialized into the plain-text React Flight stream. You must prevent accidental transmission of sensitive database attributes, credentials, API secrets, and personal identifiable information (PII) to the client runtime. ## Strict Guidelines - Engineers MUST ALWAYS project explicit Data Transfer Objects (DTOs) with whitelisted primitives before passing data across the RSC-to-Client component boundary. - Engineers MUST NOT pass raw ORM entities, database record instances, or third-party API response objects directly as props to Client Components or closures. - Engineers MUST NEVER use object spread syntax (`{...user}`) when forwarding server-fetched entities to Client Components. - Code MUST apply React 19's `experimental_taintObjectReference` or `experimental_taintUniqueValue` to server-only tokens, hashed credentials, and sensitive domain entities to block accidental Flight serialization at build/runtime. - Components NEVER capture unencrypted server secrets, authorization tokens, or internal infrastructure metadata inside `.bind()` arguments or lexical closures of Server Actions. ## Bad vs Good Implementations ### RSC Boundary Serialization: Raw Entity vs Explicit DTO Projection with React Taint #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Passing the raw database record directly to a Client Component causes React's Flight protocol to serialize all entity fields into the browser-readable stream, leaking sensitive PII and internal credentials via the HTML response. ```typescript import React from 'react'; import { db } from '@/lib/db'; import { UserProfileCard } from '@/components/UserProfileCard'; // 'use client' export default async function UserProfilePage({ params }: { params: { id: string } }) { // Anti-Pattern: Querying internal DB model and passing the raw entity directly // into the Flight serialization tree. This exposes passwordHash, ssn, stripeCustomerId, and audit logs. const rawUser = await db.user.findUniqueOrThrow({ where: { id: params.id }, }); return ( <main> {/* Flight protocol serializes the ENTIRE object to client network payload */} <UserProfileCard user={rawUser} /> </main> ); } ``` #### Production Standard (Correct) > **Standard**: Applies React 19 taint protection to the raw server object and explicitly projects an immutable, whitelisted DTO (`safeUser`), guaranteeing that only safe primitives are serialized into the client Flight payload. ```typescript import 'server-only'; import React from 'react'; import { experimental_taintObjectReference } from 'react'; import { db } from '@/lib/db'; import { UserProfileCard, type UserProfileDTO } from '@/components/UserProfileCard'; // 'use client' export default async function UserProfilePage({ params }: { params: { id: string } }) { const rawUser = await db.user.findUniqueOrThrow({ where: { id: params.id }, }); // Invariant: Taint raw database record to prevent accidental serialization anywhere in the tree experimental_taintObjectReference( 'Do not pass raw user records containing PII/credentials to the client.', rawUser ); // Invariant: Explicit DTO projection with whitelisted public fields only const safeUser: UserProfileDTO = { id: rawUser.id, displayName: rawUser.displayName, avatarUrl: rawUser.avatarUrl, }; return ( <main> <UserProfileCard user={safeUser} /> </main> ); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: React 19 Flight Payload PII & Secret Sanitization Guardrail

React 19 Flight Payload PII & Secret Sanitization Guardrail defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundary contracts between React 19 Server Components and Client Components to prevent secret and PII leakage over the wire. The React Flight serialization protocol sends raw prop values and bound Server Action closures directly to the browser DOM/network tab. This standard mandates explicit DTO projection, zero-spread object passing across client boundaries, and active use of React 19 taint APIs. 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: Passing Unsanitized Server Entities, Direct ORM Models, or Closed-Over Secrets Across the RSC-to-Client Flight Serialization Boundary 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	Passing Unsanitized Server Entities, Direct ORM Models, or Closed-Over Secrets Across the RSC-to-Client Flight Serialization Boundary	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 project explicit Data Transfer Objects (DTOs) with whitelisted primitives before passing data across the RSC-to-Client component boundary.

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.