React.js允许XSS在href中吗？

Question

User generated links in an href tag can look like:

javascript:(() => {alert('MALICIOUS CODE running on your browser')})();

which i just injected using an input field on a page that does not check on the server, that URLs start with http / https . On the react-rendered page i could later click on the link, and voila my code is running.

Why does that work, when it is often stated:

react automatically escapes everything for you. ( What does it mean when they say React is XSS protected? )

Answer 1

When react documentation points that "Everything" is escaped it just means that if you add some children to a JSX element, "Everything" in that children will be escaped.

For example in:

const element = (
  <h1>
    Random text
  </h1>
);

Everything inside the h1 will be escaped, so if instead of "Random text" you want to display some user text coming from an input field, you are safe, any malicious script will be escaped.

WARNING: This does not mean you do not have to worry about XSS at all if you are using React.

You can still get an unsafe string from that input field (or an external source, as an API, converting a JSON object, etc) and place it on element props, or using dangerouslySetInnerHTML, or directly on html attributes as href, style.. etc where that malicious code will run.

So if you really need to place text on those props is your responsibility to sanitize the data before using it. Same as usually is done in the servers when saving data entered by a user, this data has to be sanitized so that code is not saved in the DB.