web安全 - React框架中的XSS攻击

1. xss via dangerouslySetInnerHTML

在React中使用 dangerouslySetInnerHTML时要确保，数据来源是否可控且不包含javascript代码,
否则就有xss攻击的风险。

const text = "<img onerror='alert(\"Hacked!\");' src='invalid' />";
class AboutUserComponent extends React.Component {
  render() {
      return (
        <div dangerouslySetInnerHTML= {{"__html": text}} />
      );
    }
}
ReactDom.render(<AboutUserComponent />, document.querySelector('#app'));

2. xss via a.href

• Using javascript:code

const userWebsite = "javascript:alert('Hacked!');";
class UserProfilePage extends React.Component {
  render() {
    return (
      <a href={userWebsite}> My website </a>
    );
  }
}
ReactDom.render(<UserProfilePage />, document.querySelector('#app'));

• Using base64 encoded data

const userWebsite = "data:text/html;bsae64,PHNJcmlwdD5hbGVydCgxKTs8L3NjcmlwdD4=";
class UserProfilePage extends React.Component {
  render() {
    const url = userWebsite.replace(/^(javascript\:)/, "");
    return (
      <a href={url}> My website </a>
    );
  }
}
ReactDom.render(<UserProfilePage />, document.querySelector('#app'));

3. xss via attacker controlled props

const customPropsControledByAttacker = {
  dangerouslySetInnerHTML: {
      "__html": "<img onerror='alert(\"Hacked!\");' src='invalid' />"
    }
};
class Divider extends React.Component {
  render() {
    return (
        <div {...customPropsControledByAttacker} />
        );
  }
}
ReactDom.render(<Divider />, document.querySelector('#app'));