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

Question

此组件被CheckMarx标记为易受攻击。我不明白为什么。我不确定 CheckMarx 对 React 代码的理解程度如何，也不知道我会如何安抚 CheckMarx。

错误Client_DOM_XSS：应用程序的渲染将不受信任的数据嵌入到生成的输出中，状态位于 react-app\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属性中(注意，在当前代码段中，无法说状态和 props 是否受到用户输入的影响)。

我希望这有所帮助。

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();
}

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