Dangerous strings can reach browser builtins

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.

[aweary]

You might interested in this warning that is being added for javascript: links as well.

[mikesamuel]

@gaearon Thanks for explaining. IIUC, that change prevented crafted JSON and objects that are mass-assigned from getting the same level of trust as the output of a JSX expression that produces a component.