Question

我是React.js的新手，我试图在html元素中以JSON格式获取服务器端数据。所以我在前端所做的是：

export class Product extends React.Component<RouteComponentProps<{}>, {}> {
state = {
    cols : '',
}

componentDidMount() {
    axios.get(`http://example.com/product/5`)
        .then(res => {
        const tech_specs = JSON.parse(res.data.specification);
        var cols = '';
        for(var tech_specs_category in tech_specs) {
            var rows = '';
            for (var spec_title in tech_specs[tech_specs_category]){
                var tech_specs_value = tech_specs[tech_specs_category][spec_title];
                rows += '<li><span class="spec">' + spec_title + '</span><span class="value">' + tech_specs_value + '</span></li>'
            }
            cols += '<div class="spec_title"><span>&#9679; ' + tech_specs_category + '</span></div>' + '<ul>' + rows + '</ul>'
        }
        this.setState({ cols });
        })
}
public render() {
    return <div dangerouslySetInnerHTML={{__html: this.state.cols}}/>
}

和服务器端（后端）API给我的JSON：

{"specification":"{\"مشخصات کلی\":{\"تعداد سیم کارت(عدد)\":\"2\",\"تعداد سیم کارت\":\"دو سیم کارت\",\"ابعاد(میلیمتر)\":\"7 × 76.4 × 156.4\",\"وزن(گرم)\":\"165\",\"قطع سیم کارت\":\"سایز نانو\",\"جنس بدنه\":\"\",\"ضد آب\":\"FALSE\",\"تاریخ انتشار\":\"2016, September\"},\"null\":{\"قیمت\":\"\"}}

这段代码给了我我想要的，但是我知道这很容易受到xss的攻击。我该如何安全地执行此操作？

Answer 1

dangerouslySetInnerHTML属性仅用于提醒开发人员不要使用InnerHTML来获取使用输入，这可能会导致XSS攻击。因此在我的示例中，使用此方法是安全的。

在React中使用axios.get渲染嵌套的json数据

1 个答案: