在react.js中实现HTML实体解码

Question

我正在使用来自服务器的API输出文本,并且我有一个管理员,其中包含用于促进填充内容的html字段.这里的问题是现在文本显示的是html代码.我如何摆脱那些未知的HTML代码.我想我必须使用html实体解码？我将如何在反应项目中实施？下面你看到文本不仅说明了文本和HTML代码.

  export  class FullInfoMedia extends React.Component {
    render() {
        const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } });

        return (
            <div>
                <div className="about-title">
                    <div className="container">
                        <div className="row">
                            <img className="center-block" src={this.props.about.image}/>

                            <h2>{this.props.about.title}</h2>
                            {renderHTML(<p>{this.props.about.body}</p>)} 
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

您可以使用dangerouslySetInnerHTML,但请确保只渲染输入,而不是用户.它可以是XSS的好方法.

使用示例:

const renderHTML = (rawHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: rawHTML } });

然后在一个组件中:

{renderHTML("<p>&amp;nbsp;</p>")}

Answer 2

即使你可以使用dangerouslySetInnerHTML它也不是一个好的做法，正如Marek Dorda所说的那样，这对于使你的应用程序易受 XSS 攻击是一件好事。

更好的解决方案是使用he库。https://github.com/mathiasbynens/he

这将是您的组件如何使用它的示例。

import he from 'he'

export class FullInfoMedia extends React.Component {
    render() {
        const renderHTML = (escapedHTML: string) => React.createElement("div", { dangerouslySetInnerHTML: { __html: escapedHTML } });

        return (
            <div>
                <div className="about-title">
                    <div className="container">
                        <div className="row">
                            <img className="center-block" src={this.props.about.image}/>
                            <h2>{this.props.about.title}</h2>
                            { he.decode(this.props.about.body) }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

此外，如果它是我的代码库，我很可能会将解码移动到 API 调用，并且在组件中只使用来自商店的值