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;