How to Fix Insecure Deserialization in React
Learn how to prevent and fix Insecure Deserialization vulnerabilities in React applications. Step-by-step guide with code examples, security checklists, and best practices.
What Is Insecure Deserialization?
Insecure Deserialization occurs when an application deserializes (converts from a stored/transmitted format back to an object) data from untrusted sources without adequate validation. The vulnerability allows attackers to manipulate serialized objects to change application logic, execute arbitrary code, or escalate privileges.
While traditional deserialization attacks (Java, Python pickle, PHP unserialize) focus on exploiting language-specific object reconstruction to achieve remote code execution, JavaScript applications are also vulnerable through different vectors. JSON deserialization can be exploited through prototype pollution (injecting `__proto__` properties), manipulation of type fields used for polymorphic deserialization, and tampering with signed but not encrypted data (like JWTs where the signature is not properly verified).
In modern web applications, insecure deserialization commonly manifests as: trusting client-side state (form fields, cookies, hidden inputs) without server-side validation; using `eval()` or `Function()` to process serialized data; accepting and processing arbitrary object shapes from API requests; and using YAML.load() (unsafe by default in many libraries) instead of YAML.safeLoad(). GraphQL APIs that accept complex nested input objects are also susceptible to deserialization-based attacks.
Why It Matters
Insecure deserialization can lead to the most severe attack outcomes. In languages with rich object graphs (Java, Python, .NET), it directly enables remote code execution. In JavaScript applications, it can lead to prototype pollution affecting all objects in the application, privilege escalation by manipulating role or permission fields in serialized state, denial of service through deeply nested or circular object structures, and data tampering by modifying serialized state that the application trusts. The impact depends on what the application does with the deserialized data, but it frequently leads to complete application compromise.
How to Fix It in React
Never trust serialized data from untrusted sources. Implement integrity checks (HMAC signatures) on all serialized data that crosses trust boundaries. Use strict schema validation (Zod, Yup, JSON Schema) on all incoming data before processing. Avoid using `eval()`, `Function()`, or `new Function()` to parse data. For JavaScript, freeze prototypes and use `Object.create(null)` for dictionaries to prevent prototype pollution. Use type-safe deserialization that only accepts expected shapes. Validate and sanitize all nested object properties. Implement input size limits on serialized data. Use `JSON.parse()` for JSON (safe) rather than `eval()` (dangerous). For YAML, always use safe loading functions.
React-Specific Advice
- Never use `dangerouslySetInnerHTML` with unsanitized user input. If you must render HTML, sanitize it with DOMPurify first.
- Avoid storing sensitive tokens in localStorage -- use HttpOnly cookies instead. localStorage is accessible to any JavaScript running on the page.
- Validate all user inputs before sending them to your API. Use Zod or Yup for schema validation on the client side.
- Be cautious with `href` attributes in links -- `javascript:` URLs can execute code. Validate URLs against an allowlist of schemes (http, https).
React Security Checklist for Insecure Deserialization
React Security Best Practices
Never use `dangerouslySetInnerHTML` with unsanitized user input. If you must render HTML, sanitize it with DOMPurify first.
Avoid storing sensitive tokens in localStorage -- use HttpOnly cookies instead. localStorage is accessible to any JavaScript running on the page.
Validate all user inputs before sending them to your API. Use Zod or Yup for schema validation on the client side.
Be cautious with `href` attributes in links -- `javascript:` URLs can execute code. Validate URLs against an allowlist of schemes (http, https).
Avoid passing unsanitized data to component props that are rendered as HTML attributes. This can lead to attribute injection.
Use React's built-in XSS protection by rendering text content through JSX expressions `{variable}` rather than string concatenation.
Implement proper error boundaries to prevent information leakage through error messages in production.
When using `eval()`, `Function()`, or `new Function()` for dynamic code -- do not. Find an alternative that does not execute arbitrary strings as code.
Scan Your React App with SafeVibe
Stop guessing if your React app is vulnerable to Insecure Deserialization. Run an automated penetration test in minutes and get actionable results.
Start Free Scan