富文本生成的HTML标签回显

微信图片_20200110172024.png
在开发中我们经常会遇到使用富文本编辑器进行输入和回显，在回显的时候，后端返给我们的数据是这样的 微信图片_20200110172253.png
是一个包含了html标签的字符串
那我们如何优雅的回显呢？

在vue中

vue为我们提供了v-html指令，我们可以通过

<div v-html={{data}}></div>

来实现回显

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

在react中

react为我们提供了dangerouslySetInnerHTML属性，我们可以通过

<div dangerouslySetInnerHTML={{ __html: data}} />

这样的形式来实现富文本回显

不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（ 一个对象而不是字符串 ）应该被用来表明净化后的数据。