reactjs - 他们说 React 受 XSS 保护是什么意思？

Question

我在 React 教程上读到了这篇文章。这是什么意思？

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

如果 React 是安全的，XSS 攻击如何发挥作用？这种安全性是如何实现的？

Answer 1

ReactJS 在设计上就非常安全

1. View 中的字符串变量会自动转义
2. 使用 JSX，您可以传递一个函数作为事件处理程序，而不是传递可能包含恶意代码的字符串

所以像这样的典型攻击是行不通的

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>

但是...

❗❗❗警告❗❗❗

React 中仍然存在一些 XSS 攻击媒介，您需要自行处理!

1。通过 dangerouslySetInnerHTML

进行 XSS

当您使用dangerouslySetInnerHTML时，您需要确保内容不包含任何javascript。 React 不能为你做任何事。

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。通过 a.href 属性进行 XSS

示例 1:使用 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"));

<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:使用 base64 编码数据:

点击“运行代码片段”->“我的网站”查看结果

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。通过攻击者控制的 props 进行 XSS

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>

这里有更多资源

• Exploiting Script Injection Flaws in ReactJS Apps

• The Most Common XSS Vulnerability in React.js Applications

• How Much XSS Vulnerability Protection is React Responsible For?

  • https://github.com/facebook/react/issues/3473#issuecomment-90594748
  • https://github.com/facebook/react/issues/3473#issuecomment-91349525

• Avoiding XSS in React is Still Hard

• Avoiding XSS via Markdown in React