What does dangerouslySetInnerHTML prop do? How is it achieved?

[951565664]

I understand the most basic xss. I used this property in my project and found this feature is no different from innnerHtml.
I read the source code, but because of the level and Time is limited.I have not been able to find the relevant code. I want to know if it can avoid the risk of xss? Are there other risks? At the same time, if someone knows the location of the relevant code, can you help me to point it out? I have no plans to read the entire code for the moment.

[marvinhagemeister]

The prop dangerouslySetInnerHTML will update the dom by calling the native .innerHTML method on dom nodes. The property is checked here

react/packages/react-dom/src/client/ReactDOMComponent.js

Lines 311 to 316 in c954efa

	} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
	const nextHtml = nextProp ? nextProp[HTML] : undefined;
	if (nextHtml != null) {
	setInnerHTML(domElement, nextHtml);
	}
	} else if (propKey === CHILDREN) {

and the implementation of setInnerHTML can be found here:

react/packages/react-dom/src/client/setInnerHTML.js

Lines 40 to 45 in c954efa

	node.appendChild(svgNode.firstChild);
	}
	} else {
	node.innerHTML = html;
	}
	});

The implementation we use in preact is similar, although quite a bit shorter:
https://github.com/developit/preact/blob/8aa7ec9e87e34596d0ec292d12fb9f79135e382f/src/dom/index.js#L93

Because it passes a raw string to innerHTML all the usual security implications of that apply to dangerouslySetInnerHTML, too. The gist of it is that the user can insert arbitrary html code into it including script tags and therefore any javascript code. On top of that you're now at the mercy of the browser's parser that is used to convert the string into html objects.

For everything security related the owasp guidelines have a great page about html injection: https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet

[milesj]

dangerouslySetInnerHTML does not protect against XSS as @marvinhagemeister has stated. That being said, I wrote a library called Interweave that does safely render HTML: https://github.com/milesj/interweave

[951565664]

@marvinhagemeister @milesj Thank you very much, I got the answer I want.