在反应中使用 axios.get 渲染嵌套的 json 数据答案

【问题标题】：Rendering nested json data with axios.get in react在反应中使用 axios.get 渲染嵌套的 json 数据
【发布时间】：2019-01-13 21:07:42
【问题描述】：

我是 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 的攻击。我怎样才能安全地做到这一点？

【问题讨论】：

不用构建一个在 state 中设置的字符串并使用dangerouslySetInnerHTML 渲染，您可以将数据按原样设置在 state 中，并在 render 方法中从 state 派生 JSX。
这段代码给了我我想要的，但我知道这很容易受到 xss 的攻击。 - 如果它是你的后端，怎么可能？当然，它应该被消毒。 JSON 是否应该包含 HTML 尚不清楚。

标签： arrays json reactjs axios

【解决方案1】：

dangerouslySetInnerHTML 属性只是为了提醒开发者不要使用 InnerHTML 来获取使用中的输入，这可能会导致 XSS 攻击。所以在我的例子中使用这种方法是安全的。

【讨论】：