React protects against XSS attacks. The React element is used to escape text. Typeof properties. I’ve done a lot of research recently, and I basically understand how it works. It is mentioned in the official CHANAGELOG and issue.
First, what is an XSS attack
Cross-site Scripting (XSS) is a code injection Scripting attack. The attacker injects malicious scripts on the target website to run on the user’s browser. Using these malicious scripts, attackers can obtain sensitive user information such as cookies and sessionIDS, thus compromising data security. To distinguish it from CSS, the first letter of the attack has been changed to X, so it is called XSS. The essence of XSS is that malicious code is unfiltered and mixed in with the site’s normal code; Browsers cannot tell which scripts are trusted, causing malicious scripts to be executed.
What does React do
- The basic escapes user input, dynamically creating a DOM node at runtime and filling it with text
- Element? Typeof properties
Escape is easy to understand. What’s the point here? Typeof properties
Virtual DOM
React’s core mechanism: the virtual DOM. We usually write JSX, but Babel actually converts it to react. createElement, which generates a virtual DOM tree. Here is the source code.
Call ReactElement source code returns a virtual DOM node object with? Typeof, type, key, ref, props, _owner properties What typeof is.
I checked the official issue address specially
Let’s print the React element to see what it looks like:
No? How do Typeof properties XSS
JSX is the react. createElement syntax sugar. If you skip this method, the server returns a JSON struct that is identical to the ReactElement element, with the dangerouslySetInnerHTML API. Instead of escaping react, react will render this into the real DOM as well:
Create the same structure as ReactElement from the object as above. Add the Typeof property, click button, and the page will render the object:
Object is not a valid React element. What if there’s no one here? Typeof property, a normal JS object can trigger XSS attacks, but the JS symbol value is ignored in stringify and cannot be passed between the front and back ends, so the request return value will definitely not get REACT_ELEMENT_TYPE. React render the source code
So now we know what’s in React? The JSON returned by the backend does not support the Symbol type. Even if the server has a security vulnerability to return JSON as text, the JSON does not contain symbol.for (‘react.element’) and React does not render. The source code of this article is attached. This warehouse will continue to update some questions or new knowledge in React, welcome to pay attention.