I have the following code:

const Show = () => {
  const dangerousMarkup = { __html: "<script>alert('ERROR');</script>" };
  return (
             div dangerouslySetInnerHTML={dangerousMarkup} />
            <div>
              <div>
                The length of dangerousMarkup is: {dangerousMarkup.__html.length}
                <br />
                The instructions are: {dangerousMarkup.__html }
              </div>
            </div>
    )

The alert is not showing up but the text is. I will see the following on my screen:

The length of dangerousMarkup is: 32
The instructions are: <script>alert('ERROR');</script>

I have tested this on Firefox, Chrome, and Edge, all with the same results. I need to be able to have the XSS working.

Before anybody says, “This is dangerous” or “don’t do this” this is for a lab exercise I’m putting together to teach students how to detect an XSS exposure. This code will only run in a controlled lab environment.

I have attempted to run this code with const dangerousMarkup = { __html: "<p>some raw html</p>" }; as the html and this does work as expected with the “some raw html” appearing in the browser.

I have also looked at the documentation.

I installed Disable Content Security Policy on my Chrome browser from the Chrome store.

BTW, this is the much simplified case of the problem as the actual code is reading the script which a user has input on another screen and then saved to a postgresql database.