如何使用 React 和 Yum 防止在 TextField 中注入 HTML 和脚本

Question

我有这段代码用来输入描述：

 <Grid item xs={12}>
    <Typography align="left" variant="h6" gutterBottom>
        Description
    </Typography>
    {console.log(values)}
    <Field 
        name="description"
        multiline
        fullWidth
        rows={4}
        as={TextField}
        helperText={
        getIn(touched, "description")
            ? getIn(errors, "description")
            : ""
        }
        error={
        getIn(errors, "description") &&
        getIn(touched, "description")
        }
    />
</Grid>   

由于我对 React 和通过 Yum 进行的验证还很陌生，所以我想知道是否有一种方法可以防止在前端注入 HTML 代码或脚本。

感谢阅读！祝你有美好的一天:)

Answer 1

是的，你可以制作一个自定义脚本来处理它，但那样工作量太大，你可以使用像 DOMPurify 这样的包来清理用户生成的内容，然后再将其发送到后端/服务器

例子

let user-generated-content = "Dirty user-generated content"

可以通过执行以下操作清除任何脚本的上述值

let clean = DOMPurify.sanitize(user-generated-content);

然后你会通过

clean

你会通过的地方

user-generated-content

你可以查看他们的demo