Example of bad React dangerouslySetInnerHTML?

Question

Is there an example of misuse of dangerouslySetInnerHTML in ReactJS?

Everytime I look this up, it's just someone waving their hand and saying "cross site scripting."

I've seen dangerouslySetInnerHTML used to load CSS files with a css loading npm module:

import {stylesheet, classNames} from '../static/css/styles.css'
<Head><style dangerouslySetInnerHTML={{__html: stylesheet}} /></Head>

And I'm contemplating using dangerouslySetInnerHTML for some script tags for social media share buttons that have been causing my team trouble.

Code examples and explanations of how one would go about hacking a page with XSS would be highly appreciated!

Answer 1

<span dangerouslySetInnerHTML={someTextSubmittedByAUser}></span>

Imagine if you had a comment section on your page and someone submitted a comment with:

<script>while(1){}</script>

and you just passed that as the inner HTML to some node. Now anyone who hits a page which loads that comment will have their tab lock up.

There are far more nefarious things people can do. Copying your cookies and send them to a remote server, for example.