Senior LevelReact JS & React 19
How do you prevent prototype pollution and object injection attacks when spreading untrusted props?
❓ Interview Prompt: Explain Prototype Pollution, JSX object injection attacks (`<Component {...untrustedJson} />`), `__proto__` pollution, and prop whitelisting.
Spreading untrusted user-supplied JSON objects directly into JSX props ('<div {...untrustedInput} />') opens Prototype Pollution and XSS vulnerabilities:
Prototype Pollution Attack Vector:
If untrusted JSON contains '__proto__' or 'dangerouslySetInnerHTML' keys, spreading it injects malicious properties into component state or DOM attributes!
•
Defense: Always validate incoming payloads with Zod or explicitly whitelist safe prop attributes.
Code Implementation Example
jsx
// ❌ DANGEROUS: Spreading raw untrusted JSON into JSX props
// <div {...untrustedUserJson} />
// ✅ SAFE: Destructure explicitly whitelisted props
function SafeCard({ payload }) {
const { name, title } = payload;
return <div title={title}>{name}</div>;
}💡Preventing Prototype Pollution by destructuring whitelisted props.
🎯 Interview Key Takeaway
Never spread unvalidated user JSON directly into JSX props to prevent Prototype Pollution and object injection attacks.
#Security#Prototype Pollution#JSX#Senior
Back to all React JS & React 19 Questions→