当他们说React受XSS保护时意味着什么？

Question

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

反应是安全的.我们不生成HTML字符串,因此XSS保护是默认设置.

如果React是安全的,XSS攻击如何工作？这种安全性如何实现？

Answer 1

ReactJS设计非常安全

1. 视图中的字符串变量会自动转义
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>

但......

❗❗❗Warning❗❗❗

你还需要在React中处理一些XSS攻击向量!

1. XSS via dangerouslySetInnerHTML

当您使用时,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. XSS通过a.href属性

示例1:使用javascript:代码

单击"运行代码段" - >"我的网站"以查看结果

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. 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>

这里有更多的资源

• 在ReactJS应用程序中利用脚本注入漏洞

• React.js应用程序中最常见的XSS漏洞

• XSS漏洞防护对多少负责？

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

• 在React中避免使用XSS仍然很难

• 在React中通过Markdown避免XSS

Answer 2

React会自动为您转义变量...它会阻止通过带有恶意Javascript的字符串HTML进行XSS注入.当然,输入也会随之消毒.

例如,假设你有这个字符串

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

如果你尝试渲染这个字符串作出反应

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

你会在页面上看到整个字符串,包括<span>元素标记.也就是在浏览器中你会看到<img src="javascript:alert('XSS!')" />

如果您查看源html,您会看到

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

以下是有关XSS攻击的更多细节

React基本上是这样做的,所以你不能插入标记,除非你自己在渲染函数中创建元素...据说他们确实有一个允许这样渲染它的函数dangerouslySetInnerHTML... 这里有一些关于它的更多细节

编辑:

很少有事情需要注意,有办法解决React逃脱的问题.一种更常见的方式是用户为组件定义道具.不要将用户输入的任何数据扩展为道具!