react-18-security-modeling_skill

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