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

Question

我在React教程上看过这个。这是什么意思？

反应是安全的。我们没有生成HTML字符串，因此XSS保护是默认设置。

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

Answer 1

React会自动为您转义变量…它通过带有恶意Javascript的字符串超文本标记语言防止XSS注入…自然，输入也会随之被清理。

例如，假设您有此字符串

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

如果您尝试在 react 中呈现此字符串

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

您将从字面上看到整个字符串，包括

如果查看源html，您将看到

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

以下是关于什么是XSS攻击的更多细节

React基本上做到了这一点，因此您不能插入标记，除非您自己在render函数中创建元素...也就是说，他们有一个函数允许这样的渲染，这个函数叫做< code > dangerouslysettinnerhtml ...这里有更多的细节

需要注意的是，有一些方法可以绕过React逸出的内容。一种更常见的方式是当用户为组件定义道具时。不要从用户输入中扩展任何数据作为道具！

Answer 2

ReactJS在设计上非常安全，因为

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

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

js lang-js prettyprint-override">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>