Core Code
Core Code Modern Dev Handbook
REACT Contents
React Fundamentals
React Architecture Overview JSX and Rendering Model Component Design Principles Props and Data Flow State Management with useState Side Effects with useEffect Event Handling Patterns Conditional Rendering Strategies Lists, Keys, and Reconciliation Forms and Controlled Components Component Composition Lifting State and Shared State Basic Routing with React Router Failure Modes in Beginner React Apps
React + TypeScript
Typing Functional Components Typing Props and Children useState and Type Inference useReducer with Type Safety Typing Event Handlers Generic Components Utility Types in React Discriminated Unions for UI State Strict Mode and Null Safety API Response Typing Strategies Form Typing Patterns Avoiding any and Unsafe Casts Type-Safe Context API Failure Modes in React + TypeScript
React Advanced Patterns
Custom Hooks Architecture Context vs Prop Drilling Tradeoffs Compound Components Pattern Controlled vs Uncontrolled Abstractions Render Props and Pattern Alternatives State Machines in React Performance Optimization Playbook Memoization Strategies Code Splitting and Lazy Loading Error Boundaries and Recovery Portal Architecture Large Scale Folder Structure Testing Strategy: Unit and Integration Common React Anti Patterns
React Production
CSR vs SSR vs SSG Hydration and Mismatch Failures Next.js Architecture Overview App Router Deep Dive Authentication Patterns Token Storage Security Role Based UI Control API Integration Patterns Rate Limiting and UI Resilience Frontend Security Checklist XSS in Modern React Observability in Frontend Bundle Optimization Production Incident Playbook
Distributed Systems
Distributed System Fundamentals CAP Theorem in Practice Consistency Models Replication Strategies Leader Election Concepts Consensus Algorithms Overview Event Driven Architectures Message Queues and Delivery Guarantees Idempotency Patterns Saga Pattern Circuit Breakers Backpressure and Flow Control Observability in Distributed Systems Failure Scenarios and Postmortems

XSS in Modern React

React reduces XSS by escaping text, but XSS still happens through HTML injection, URL and attribute misuse, and compromised dependencies. Learn real vectors, defenses, and production monitoring.
On this page

What React Protects by Default

  • React escapes text nodes by default, reducing classic injection risks.
  • This does not remove XSS. XSS can still occur via unsafe HTML, dangerous URLs, and third party code.

High Risk Vectors

  • Unsafe HTML injection: rendering untrusted HTML content.
  • URL injection: untrusted values placed into href, src, or navigation.
  • Attribute misuse: untrusted values used in style or data attributes then interpreted by other code.
  • Dependency compromise: malicious code in packages executes in the client.

Unsafe HTML Example

// High risk when html is untrusted
function Dangerous({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Safer Approach

  • Prefer rendering as text, not markup.
  • If HTML is required, sanitize with a strict allowlist and add tests for bypass attempts.
  • Keep sanitized content isolated and never mix with dynamic script insertion.

URL and Navigation Controls

  • Validate protocols for outbound links. Allow https and mailto only if required.
  • Block javascript and data URLs in user controlled link fields.
  • Encode query params and never concatenate raw strings into URLs.

Content Security Policy

  • CSP reduces impact of XSS by restricting script sources.
  • Use nonces or hashes for scripts if inline is unavoidable.
  • Monitor CSP violation reports to detect injection attempts.

Operational Failure Modes

  • HTML sanitization allowlist too broad, enabling script execution via edge tags.
  • Trusted component later reuses sanitized HTML in a different context and breaks assumptions.
  • URL values not validated and allow javascript protocol execution.
  • Dependency update introduces malicious code path.

Production Checklist

  • Inventory all unsafe HTML usage and document justification.
  • Sanitize untrusted HTML with strict allowlist and test bypass cases.
  • Validate outbound URLs and restrict protocols.
  • Deploy CSP and monitor violations.
  • Lock dependencies and audit changes continuously.
Observability in Frontend →