192

I read this on the React tutorial. What does this mean?

React is safe. We are not generating HTML strings so XSS protection is the default.

How do XSS attacks work if React is safe? How is this safety achieved?

2 Answers 2

390

ReactJS is quite safe by design since

  1. String variables in views are escaped automatically
  2. With JSX you pass a function as the event handler, rather than a string that can contain malicious code

so a typical attack like this will not work

const username = "<img onerror='alert(\"Hacked!\")' src='invalid-image' />";

class UserProfilePage extends React.Component {
  render() {
    return (
      <h1> Hello {username}!</h1>
    );
  }
}

ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

but ...

❗❗❗Warning❗❗❗

There are still some XSS attack vectors that you need to handle yourself in React!

1. XSS via dangerouslySetInnerHTML

When you use dangerouslySetInnerHTML you need to make sure the content doesn't contain any javascript. React can't do here anything for you.

const aboutUserText = "<img onerror='alert(\"Hacked!\");' src='invalid-image' />";

class AboutUserComponent extends React.Component {
  render() {
    return (
      <div dangerouslySetInnerHTML={{"__html": aboutUserText}} />
    );
  }
}

ReactDOM.render(<AboutUserComponent />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

2. XSS via a.href attribute

Example 1: Using javascript:code

Click on "Run code snippet" -> "My Website" to see the result

const userWebsite = "javascript:alert('Hacked!');";

class UserProfilePage extends React.Component {
  render() {
    return (
      <a href={userWebsite}>My Website</a>
    )
  }
}

ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Example 2: Using base64 encoded data:

Click on "Run code snippet" -> "My Website" to see the result

const userWebsite = "data:text/html;base64,PHNjcmlwdD5hbGVydCgiSGFja2VkISIpOzwvc2NyaXB0Pg==";

class UserProfilePage extends React.Component {
  render() {
    const url = userWebsite.replace(/^(javascript\:)/, "");
    return (
      <a href={url}>My Website</a>
    )
  }
}

ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

3. XSS via attacker controlled props

const customPropsControledByAttacker = {
  dangerouslySetInnerHTML: {
    "__html": "<img onerror='alert(\"Hacked!\");' src='invalid-image' />"
  }
};

class Divider extends React.Component {
  render() {
    return (
      <div {...customPropsControledByAttacker} />
    );
  }
}

ReactDOM.render(<Divider />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Here are more resources

8
82

React automatically escapes variables for you... It prevents XSS injection via string HTML with malicious Javascript.. Naturally, inputs are sanitized along with this.

For instance let's say you have this string

var htmlString = '<img src="javascript:alert('XSS!')" />';

if you try to render this string in react

render() {
    return (
        <div>{htmlString}</div>
    );
}

you will literally see on the page the whole string including the <span> element tag. aka in the browser you will see <img src="javascript:alert('XSS!')" />

if you view the source html you would see

<span>"<img src="javascript:alert('XSS!')" />"</span>

Here is some more detail on what an XSS attack is

React basically makes it so you can't insert markup unless you create the elements yourself in the render function... that being said they do have a function that allows such rendering its called dangerouslySetInnerHTML... here is some more detail about it


Edit:

Few things to note, there are ways to get around what React escapes. One more common way is when users define props to your component. Dont extend any data from user input as props!

4
  • 20
    Escapes everything? Really? React is NOT safe by default, there is a lot of things you have to do manually and attack vectors that you have to understand. All React does is escape html to string when you are trying to insert it with {html}. But there are a million other ways to allow XSS, which React does NOT protect against. <a href="{...}" />, <img src={...} />, <iframe src="{...} /> and ton of other props that allow to inject executable javascript. And then there is CSS script injections through style={...} prop. Answer below by @Marty Aghajanyan actually outlines the possible risks.
    – andree
    Oct 25, 2018 at 8:40
  • 1
    @andree thanks for pointing my typo out. It is a 3 year old post. Obviously there are ways to get around what React escapes and each dev should be weary of that. Oct 26, 2018 at 22:06
  • Thanks for editing your answer @John Ruddell. No offense, but your answer made React look more secure than it actually is, and since your answer is one of the first that comes up on the topic, I just wanted to point that out. Unfortunately this is a common theme I see in overall frontend (not just React) security - things look secure or easily securable on the surface, but when you dig in, turns out there are big holes. Basic security questions should have answers that are easy to find that are summarized somewhere, unfortunately that is not my experience lately.
    – andree
    Oct 27, 2018 at 10:52
  • 3
    Well.. over time documentation comes out as security is tested. Answers that we're once helpful aren't as helpful. Hard part is keeping all answers up to date with the changing tech Oct 27, 2018 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.