Question

我正在使用自己的文档学习REACT JS。当我进入JSX Prevents Injection Attacks部分时，我对这个话题感到困惑。 JSX如何防止注入攻击？谁能解释一下。

文档中有关该主题的内容为：

将用户输入嵌入JSX是安全的。
y2
默认情况下，React DOM在呈现它们之前会转义JSX中嵌入的任何值。这样可以确保您永远不会注入未在应用程序中明确编写的任何内容。一切在呈现之前都会转换为字符串。这有助于防止XSS（跨站点脚本）攻击。

Answer 1

因为JSX将文本呈现为文本，所以用户输入中的HTML不会像纯文本一样被视为HTML。一个示例可能是显示此问题的最简单方法：

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userContent: `So I told the guy <script src="http://example.com/malicious-script.js><\/script>`
        };
    }
    
    render() {
        return <div>User content: {this.state.userContent}</div>;
    }
}

ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

请注意如何将脚本标签呈现为文本。它不会创建脚本元素，而只是字符（<，s，c，r等）。

React文档-JSX防止注入攻击

1 个答案: