Skip to content

Use of FindDOMNode and Refs

What does this mean ?

findDOMNode and createRef returns native DOM elements, with their full API. The issue with such a workaround is that it returns native DOM components with their full API. As a result, the application has the ability to control the element directly without going via React. If not used appropriately, these direct interactions might result in XSS.

What can happen ?

An attacker can utilize the vulnerability in your application to inject malicious script into your user's browser, resulting in an XSS attack.

Recommendation

  • There is no HTML output, only text.
  • To build HTML nodes, use the appropriate DOM APIs.
  • Before inserting data into the page, run it via DOMPurify.

Sample Code

Vulnerable :

ReactDOM.findDOMNode(this).innerHTML = realData;

Non Vulnerable :

ReactDOM.findDOMNode(this).innerText = realData;

References