When you build a website or a web application, it’s important to care about more than just how fast or good-looking it is. Security matters too. If your app isn’t secure, someone might be able to do things like steal user data, break your site, or trick people into giving up sensitive information.
One common security problem in web development is called XSS, or Cross-Site Scripting. It’s been around for a long time, and even today, lots of websites still get attacked this way.
If you’re working with React and using JSX, the good news is that React already helps protect your app against this kind of issue by default. But to really write safe code, you should understand how this protection works — and how you could accidentally turn it off if you’re not careful.
What Is Cross-Site Scripting (XSS)?
XSS happens when someone manages to insert malicious JavaScript code into your website. That code then runs in the browser of whoever visits the site. This isn’t just about annoying pop-ups — it can lead to stolen passwords, hijacked user accounts, and a lot more serious problems.
Most of the time, this happens when websites don’t properly handle user input. That could be things like comments, forms, search fields — anywhere a user can type something.
Here’s a very basic example of an XSS attack:
<script>alert('You got hacked!')</script>If this gets saved to your database and shown on your website without being handled safely, the browser will run it. That’s the problem.
How JSX Helps Protect Against XSS
React uses JSX to help you build your UI. When you use curly braces {} inside JSX to show data on the page, React automatically escapes that data for you.
What does “escape” mean?
It just means React changes special characters (like <, >, ", and ') into safe versions so that the browser treats them as text, not code.
For example, <script> becomes <script> when shown on the page. That way, even if someone tries to sneak in a script, it won’t run. The browser will just display it like normal text.
const userInput = "<script>alert('Hacked!')</script>";
const MyComponent = () => (
<div>{userInput}</div>
);
On the page, this will look like:
<div><script>alert('Hacked!')</script></div>It doesn’t run the script. It just shows it as harmless text. React does this for you automatically.
Can You Turn Off This Protection? Yes. Should You? Only If You Know What You’re Doing.
React gives you a way to manually insert raw HTML into your app. This is through something called dangerouslySetInnerHTML. The name is a big clue — it’s called dangerous for a reason.
Here’s an example:
<div dangerouslySetInnerHTML={{ __html: userInput }} />In this case, React will trust whatever you give it and insert it directly as HTML. If it contains a <script> tag, the browser will run it. That’s how XSS happens.
When to Use dangerouslySetInnerHTML
You should avoid using this unless absolutely necessary. Sometimes you might need it, for example:
- If you are rendering HTML from a CMS you control.
- If you are showing content you have already cleaned with a tool like DOMPurify.
But if you’re working with any data you don’t fully trust, don’t use it.
Real Example: The Safe Way vs. The Risky Way
Imagine you are pulling a title from an API. Here’s how to handle it safely:
<h1>{data}</h1> // React escapes it safelyReal Example: The Safe Way vs. The Risky Way
Imagine you are pulling a title from an API. Here’s how to handle it safely:
<h1>{data}</h1> // React escapes it safelyNo matter what’s inside data, React will protect you.
But if you do this:
<h1 dangerouslySetInnerHTML={{ __html: data }}></h1>Then if data contains something bad, it will run. That’s a risk.
Key Things to Remember
- React escapes curly brace
{}content automatically. - This stops most XSS attacks.
- Avoid dangerouslySetInnerHTML unless you really need it and know it’s safe.
- If you must use it, sanitize the data first with a library like DOMPurify.
- Always be careful with user-generated content.
Why React’s Approach Makes Sense
React was designed to help developers avoid common mistakes. By escaping data automatically, React makes your life easier. You don’t have to think about escaping every single time you show something from a user.
But React doesn’t stop you from bypassing this safety. It just warns you clearly when you’re doing it. That’s why dangerouslySetInnerHTML has that long, serious-sounding name.
Final Thoughts
Security is part of writing good web applications. React helps by making the safe way the default. If you just use curly braces in JSX, React handles escaping for you. This protects your users from one of the most common types of attacks.
But if you decide to render raw HTML, it’s on you to make sure that data is clean and safe.
A Simple Safety Checklist for React Apps
| Action | Why It’s Important |
|---|---|
Use {} for inserting user data | React escapes it safely |
Avoid dangerouslySetInnerHTML | Stops raw HTML from running code |
| Sanitize any raw HTML with DOMPurify | Prevents malicious scripts |
| Validate input on your backend too | Adds extra protection |
| Keep libraries updated | Fixes known security holes |
📽️ Watch Related Video:
👉 How JSX Secures Your React Code – YouTube Tutorial
🎯 Subscribe for more React tips & coding best practices!