React vs. XSS: Where the Guardrails End

Ayomidejhay — Tue, 16 Jun 2026 15:18:41 +0000

React is often described as “secure by default” because it automatically escapes values inserted into JSX. However, this creates a dangerous misconception: React reduces XSS risk, but it does not eliminate it.
Cross-Site Scripting (XSS) attack is a type of injection in which malicious scripts are injected into trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code mostly in the form of a browser side script. This attack can be executed when data enters a web application through an untrusted source, mostly a web request and the data is then included in dynamic content that is sent to a web user without being validated for malicious content.
An attacker can use XSS to send a malicious script to an unsuspecting user. The end user’s browser, not knowing the script cannot be trusted, can execute the script, causing the malicious script to gain access to cookies, session tokens or other sensitive information retained by the browser and used with that site.
In 2019, a reflected XSS vulnerability was discovered on the PayPal login page. Attackers could manipulate URL parameters to inject malcious code into the project. When unsuspecting users clicked the malicious links sent via phishing emails, the script executed, potentially allowing attackers to steal session tokens.
There are three main types of XSS attacks:

Reflected XSS Attacks: Reflected XSS attacks occur when malicious scripts submitted by an attacker are immediately returned by a web server in its response, such as within error messages, search results, or other content that includes user input. These attacks are typically delivered through external channels like emails, social media messages, or malicious websites. When a victim clicks a crafted link, submits a manipulated form, or visits a malicious page, the harmful code is sent to the vulnerable website and reflected back in the server’s response. Because the response appears to come from a trusted website, the victim’s browser executes the script, potentially allowing the attacker to steal sensitive information or perform unauthorized actions on behalf of the user.
Stored XSS Attacks: Stored XSS attacks occur when malicious scripts are permanently saved on a target server, typically within databases, discussion forums, comment sections, visitor logs, or other data storage locations. Unlike reflected attacks, the malicious code remains on the server and is automatically delivered to users whenever they access the affected content. As a result, victims unknowingly load and execute the harmful script in their browsers while viewing legitimate web pages. Because the attack persists on the server until it is removed, Stored XSS can affect multiple users over an extended period. This type of attack is also known as Persistent XSS or Type-II XSS.
DOM Based XSS Attacks: Sometimes referred to as Type-0 XSS, occurs when malicious code is executed due to changes made to the Document Object Model (DOM) within the user's browser. In this type of attack, the original web page sent by the server remains unchanged. Instead, the attacker manipulates data in the browser environment such as URL parameters, fragments, or client side inputs, causing the page’s JavaScript code to behave in unintended ways. As a result, the malicious script is executed entirely on the client side without requiring the server to modify its response. This differs from Stored XSS and Reflected XSS, where the attack payload is injected into the server-generated response due to vulnerabilities on the server side.

Since React is described as “secure by default” against XSS Attacks,what exactly does React protect you from ?

Now, React includes several built-in protections that reduce the risk of XSS attacks. The built-in protection includes:

a. Automatic Escaping of JSX Content :
When rendering user input inside JSX, React automatically escapes dangerous HTML characters

</> JavaScript
const name = “<script>alert(‘XSS’)</script>”;
return <div>{name}</div>;

Instead of executing the script, React displays it as plain text. React, through this prevents basic script injection, stops attackers from injecting executable HTML through JSX expressions.

b. Safe Rendering Model :
React encourages developers to describe the UI declaratively rather than manually manipulating the DOM.

</> JavaScript
return <p>{userComment}</p>;

Since React controls how content is rendered, it applies escaping automatically. This gives less reliance on dangerous DOM APIs.

c. Reduced Need for Direct DOM Manipulation :
Since React manages updates through it’s virtual DOM, it typically avoid direct interaction with methods such as document.write(), innerHTML, outerHTML. Through this, React eliminates many common sources of DOM-based XSS.

Despite these built-in protections that reduce the risk of XSS attacks, React still gives developers escape hatches that can reintroduce XSS. React cannot protect applications when developers bypass its safety mechanisms. Ways by which developers bypass these safety mechanisms include:

a. dangerouslySetInnerHTML :
This is React’s most obvious escape hatch.

</> JavaScript
<div dangerouslySetInnerHTML={{__html: content}} />;

React inserts the HTML exactly as provided. If “content” contains malicious code, it may execute in the browser. The recommended solution to this is to sanitize content first.

</> JavaScript
DOMPurify.sanitize(content);

b. Direct DOM Manipulation :
Using browser APIs directly bypasses React's escaping protections.

</> JavaScript
element.innerHTML = userInput;

User Input can become executable code.

c. Rendering HTML from External Sources :
Reacts assumes incoming data is already trusted. Example of these data can be CMS content, API responses, User generated content, Markdown renderers.If malicious HTML is rendered without sanitization, XSS becomes possible.

d. Third Party Libraries :
Many libraries inject HTML into the DOM like Markdown parsers, Analytics widgets, Chat widgets. A vulnerable package can bypass React’s protections entirely.

While React offers incredible built-in protection against XSS, security is ultimately a shared responsibility. Bypassing React's guardrails without proper sanitization opens the door to vulnerabilities.

DEV Community: Ayomidejhay

React vs. XSS: Where the Guardrails End