Issue 1:
Do you want to request a feature or report a bug?

I would like to request a bug.

What is the current behavior?

From what I know, it is possible to inject object in props. However, this object seems to be html escaped when inserted into the DOM from my observation.

Thus, if I try to add an onerror=alert('XSS') in a <img {this.props.dangerousAtt /> tag through a props, this is gonna be escaped when rendered. Then, I realized that inserting an id='test' is totally possible with a props. So I thought only dangerous javascript injectable attributes are escaped such as onerror, onload, ...

However, I realized that the href=javascript:alert('1') is not escaped when inserted through a props. The javascript gets executed. Here, I thought it might a bug.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

class App extends Component {
render() {
const href = {href: "javascript:alert('1')"};
return (
<div>
<a {...href}>Click here</a>
</div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));

What is the expected behavior?

I would expect the href object to be escaped as a props, so being treated exactly like onerror or other javascript attributes.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React version: 16.6.0

Browser: Chrome 70.0.3538.77

Issue 2:
Do you want to request a feature or report a bug?

A bug, but a well known and worked-around one.

What is the current behavior?

var x = 'javascript:alert(1)';
ReactDOM.render(
(<a href={x}>Link</a>),
document.getElementById('container')
);

produces a link that alerts.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Load the code above in the codepen REPL

After the REPL loads, click the "Run" button at the top left.

You should see a blue "link" in the bottom-right pane.

Click it. An alert will popup.

The alert should not pop up.

A simple string that reaches an href attribute should not cause arbitrary code execution even with user interaction.

What is the expected behavior?

A string that reaches a browser builtin like the HTMLAElement.prototype.href setter should not cause code execution.

Discussion

Polymer Resin uses hooks in another webcomponents framework to intercept value before they reach browser builtins where they can be vetted. A similar approach could work for React.

It allows values to reach browser builtins when they are innocuous or have a runtime type that indicates that the author intentionally marked them as safe for that kind of browser builtin.

For example, an instanceof SafeURL would be allowed to reach HTMLAElement.prototype.href as would any string that is a relative URL, or one with a whitelisted protocol in (http, https, mailto, tel) but not javascript:....

Many developers know that <a href={...}> is risky, but if the link is an implementation detail of a custom React element, then developers don't have the context to know which attributes they need to be careful with. They shouldn't have to either since it is an implementation detail.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I believe this is widespread across versions.

An earlier REPL I tried showed that it worked on version 16.2.0 from https://unpkg.com/react-dom/umd/react-dom.development.js but I don't know what version the jsfiddle above uses.