为什么CheckMarx将此代码标记为XSS漏洞？

Question

CheckMarx将此组件标记为脆弱。我不明白为什么。我不确定CheckMarx了解React代码的程度，并且我不知道如何安抚CheckMarx。

该错误是client_dom_xss：应用程序的渲染嵌入了带有状态的生成输出中的不信任数据，在React-App \ Src \ src \ visualizer \ Visualization.js的第25行中。此不信任数据直接嵌入到输出中，而无需进行适当的消毒或编码，从而使攻击者能够将恶意代码注入输出中。

谁能帮忙？

import React, {Component} from 'react';


export default class Visualization extends Component {
    constructor(props) {
        super(props);
        this.state = {
            x: null,
        };
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if(!this.props.x) {
            this.setState({
                x: null,
            });
        } else if(this.props.x !== prevProps.x) {
            this.setState({
                x: this.props.x,
            });
        }
    }

    render() {
        return (<div>X: {this.state.x}</div>)
    }
}

Answer 1

您提供的代码片段确实不容易受到 XSS 攻击。

我使用 Checkmarx 的 SAST（最新版本）扫描了代码片段，但无法重现结果。您有可能使用旧版本吗？

还值得一提的是，在某些情况下，可能会出现 XSS，例如，如果输入嵌入到 IFrame 元素的 srcdoc 属性内（请注意，在当前代码段中，不可能说如果状态和道具受到用户输入的影响）。

我希望这有帮助。

Answer 2

作为绕过此期间的一种方法，您可以使用给定的方法

此给定解决方案是给定规则的绕过解决方案

创建一种名为 content（）的方法那将返回JSX。然后可以从 Render（）中转介。

因此，您需要将下面的片段转换

render() {
    return (<div>X: {this.state.x}</div>)
}

为

content() {
    return (<div>X: {this.state.x}</div>)
} // <--- method returning JSX

render() {
    return this.content();
}

现在，您绕过了通过状态生成的输出中的渲染嵌入不受信任的数据。这将解决CheckMarkX中给定的XSS错误。