How React helps in mitigating Cross-Site Scripting (XSS) attack

A good article to understand the XSS attack: https://medium.com/@charithra/introduction-to-xss-e9eb90b4323d

JSX Prevents Injection Attacks

It is safe to embed user input in JSX:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

How to mitigate XSS attack:
1) Never Insert Untrusted Data Except in Allowed Locations
The first rule is to deny all — don’t put untrusted data into your HTML document.

Examples:
1) <script>…NEVER PUT UNTRUSTED DATA HERE…</script> directly in a script

2) <! — …NEVER PUT UNTRUSTED DATA HERE… → inside an HTML comment

3) <div …NEVER PUT UNTRUSTED DATA HERE…=test /> in an attribute name

4) <NEVER PUT UNTRUSTED DATA HERE… href=”/test” /> in a tag name
5) <style>…NEVER PUT UNTRUSTED DATA HERE…</style> directly in CSS

2) HTML Escape Before Inserting Untrusted Data into HTML Element Content

Escape the following characters with HTML entity encoding to prevent switching into any execution context, such as script, style, or event handlers. Using hex entities is recommended in the spec. In addition to the 5 characters significant in XML (&, <, >, “, ‘), the forward slash is included as it helps to end an HTML entity.
& → &amp;
< → &lt;
> → &gt;
“ → &quot;

3) Attribute value Escape
Attribute value can be provided as:
<div attr=…ESCAPE UNTRUSTED DATA BEFORE PUTTING HERE…>content

Except for alphanumeric characters, escape all characters with ASCII values less than 256 with the &#xHH; format to prevent switching out of the attribute. The reason this rule is so broad is that developers frequently leave attributes unquoted. Properly quoted attributes can only be escaped with the corresponding quote. Unquoted attributes can be broken out of with many characters, including [space] % * + , — / ; < = > ^ and |.

4) JavaScript Escape Before Inserting

Examples:
1) <script>alert(‘…ESCAPE UNTRUSTED DATA BEFORE PUTTING HERE…’)</script> inside a quoted string

2) <script>x=’…ESCAPE UNTRUSTED DATA BEFORE PUTTING HERE…’</script> one side of a quoted expression

3) <div onmouseover=”x=’…ESCAPE UNTRUSTED DATA BEFORE PUTTING HERE…’”</div> inside quoted event handler

4) HTML escape JSON values in an HTML context and read the data with JSON.parse

5) Ensure returned Content-Type header is application/json and not text/html.
This shall instruct the browser not misunderstand the context and execute injected script

6) CSS Escape And Strictly Validate Before Inserting Untrusted Data into HTML Style Property Values
Example:
1) <style>selector { property : …ESCAPE UNTRUSTED DATA BEFORE PUTTING HERE…; } </style> property value

2) { background-url : “javascript:alert(1)”; } // and all other URLs

3) { text-size: “expression(alert(‘XSS’))”; } // only in IE

7) URL Escape Before Inserting Untrusted Data into HTML URL Parameter Values