0 day streak
javascript / beginner
Snippet

Preventing Cross-Site Scripting by Escaping User-Generated Text

By default, React escapes all values embedded in JSX expressions before rendering them to the DOM. This protects your application against Cross-Site Scripting (XSS) attacks by converting raw HTML tags into harmless strings.

snippet.js
javascript
1
2
3
4
5
6
7
8
function UserBio({ bioText }) {
// React automatically escapes strings embedded in JSX
return (
<section className="profile-bio">
<p>{bioText}</p>
</section>
);
}
react
Breakdown
1
function UserBio({ bioText }) {
Defines a component that receives unvalidated user input via props.
2
<p>{bioText}</p>
Safely embeds the string in JSX, causing React to treat characters like '<' and '>' as plain text.