home / skills / harborgrid-justin / lexiflow-premium / react-18-security-modeling

react-18-security-modeling skill

/frontend/.github-skills/react-18-security-modeling

This skill helps identify and mitigate XSS risks in React 18 streaming and hydration, enforcing safe HTML handling and CSP alignment.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill react-18-security-modeling

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

847 B

---
name: react-18-security-modeling
description: Model and mitigate security risks that arise from advanced rendering and hydration flows.
---

# React 18 Security Modeling

## Summary
Model and mitigate security risks that arise from advanced rendering and hydration flows.

## Key Capabilities
- Identify XSS risks in streaming SSR and hydration.
- Validate safe handling of HTML and serialized data.
- Apply content security policies aligned with React 18 behavior.

## PhD-Level Challenges
- Formalize a threat model for concurrent rendering flows.
- Prove safety of serialization/deserialization pipelines.
- Evaluate CSP trade-offs for streaming responses.

## Acceptance Criteria
- Provide a React-specific threat model document.
- Demonstrate mitigation of a simulated injection attack.
- Document CSP configuration and impact analysis.

Overview

This skill models and mitigates security risks introduced by React 18’s advanced rendering and hydration flows. It focuses on identifying injection and serialization weaknesses specific to streaming SSR, concurrent rendering, and client hydration. The output is practical guidance: threat models, mitigation patterns, and CSP recommendations tailored to React 18 behavior.

How this skill works

The skill inspects server-rendered HTML, streamed chunks, and serialized data passed to the client to locate XSS and injection vectors. It validates code paths that embed HTML or JSON into responses and tests hydration boundaries where untrusted data may be reinterpreted by the client. Finally, it produces CSP configurations and mitigation steps to harden streaming and hydration pipelines.

When to use it

When migrating server rendering to React 18 streaming SSR or selective hydration
While designing serialization/deserialization pipelines for state or props sent to the client
When implementing progressive streaming that intermixes HTML and JSON fragments
During security reviews of client hydration logic and concurrent rendering flows
When defining or updating Content Security Policy for a React app using SSR

Best practices

Treat all server-side embedded data as untrusted; escape or serialize with strict encoders
Use structured serialization (JSON) isolated from HTML; avoid string concatenation into templates
Apply nonce or hash-based CSP for scripts and restrict unsafe-inline and eval
Validate and canonicalize props before sending them into streamed HTML fragments
Instrument tests that simulate partial hydration, interrupted streams, and replay attacks

Example use cases

Create a React-specific threat model that maps streaming SSR states to attack surfaces
Audit a serialized state pipeline and replace unsafe interpolation with JSON.parse-safe patterns
Simulate an injection during partial hydration and demonstrate a mitigation (e.g., output encoding)
Design a CSP that balances security and runtime compatibility for streamed scripts and inline data
Proof-of-concept test that shows safe deserialization and prevents prototype pollution

FAQ

Why is streaming SSR riskier than traditional SSR?

Streaming interleaves content and can introduce new parsing boundaries where unescaped data or serialized fragments are interpreted by the browser, increasing XSS and injection risk.

Can CSP fully mitigate hydration risks?

CSP reduces many script-based exploits but cannot replace proper output encoding and safe serialization; use CSP alongside strict encoding and validation.