Symbol Tagging for dangerouslySetInnerHTML to Help Prevent XSS

[sebmarkbage]

If you're spreading props from a user provided source we have a XSS. E.g.

var data = JSON.parse(decodeURI(location.search.substr(1)));

function Foo(props) {
  return <div><div {...props} /><span>{props.content}</span></div>;
}

ReactDOM.render(<Foo {...data} />, container);

That's already true today because this URL is now an XSS hole:

?{"content":"Hello","dangerouslySetInnerHTML":{"__html":"<a%20onclick=\"alert(%27p0wned%27)\">Click%20me</a>"}}

This is very uncommon. There are many different ways to screw up getting user data. However doing that + also spreading is unusual. We decided in #3473 that React should add an extra layer of protection for these types of mistakes. This one is much more uncommon than the one in #3473 though.

You should already have a pretty centralized way of sanitizing these objects so it seems to me that adding a Symbol to this object shouldn't be that big of a deal though.

Either:

{ $$typeof:Symbol.for('react.rawhtml'), __html: myHTML }

or:

{ [Symbol.for('react.rawhtml')]: myHTML }

[RundaScath]

I am running react18 and recently installed and ran AuditJS scan against the project. In the scan react version 18.1.0 was flagged for Cross-Site Scripting (XSS) and this issue was a referenced link...

pkg:npm/react@18.1.0 - 1 vulnerability found!

  Vulnerability Title:  [sonatype-2017-0717] CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
  ID:  sonatype-2017-0717
  Description:  react - Cross-Site Scripting (XSS)
  
  The software does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to other users.
  CVSS Score:  4.7
  CVSS Vector:  CVSS:3.1/AV:N/AC:H/PR:N/UI:R/S:C/C:L/I:L/A:N
  Reference:  https://ossindex.sonatype.org/vulnerability/sonatype-2017-0717?component-type=npm&component-name=react&utm_source=auditjs&utm_medium=integration&utm_content=4.0.37

I was wondering if any work is being done to resolve this issue?

[RevelStudios]

I received the same vulnerability notice as above for react@18.2

[sonatype-2017-0717] CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')

Description
react - Cross-Site Scripting (XSS)

The software does not neutralize or incorrectly neutralizes user-controllable input before it is placed in output that is used as a web page that is served to

What's up with this? Advice on how to resolve?