React Security

React escapes values rendered via JSX data binding by default, but several patterns can reintroduce XSS vulnerabilities. This skill covers the most common pitfalls.

Default Data Binding

React automatically escapes values inside curly braces when rendering text content. This protection does not apply to HTML attributes.

Safe -- text content is escaped:

<div>{userData}</div>

Unsafe -- attribute values are not automatically escaped:

<form action={userData}>...</form>