首先是XSS。

HTML有一些不同的解析模式，根据在什么标签内部进行不一样的解析：在一些“国家”里面，将转义HTML实体，而在另外一些国家里面，不转义HTML实体。

为了避免混淆，我们目前只讨论范围最广的那个“国家”，不妨叫它“国家A”。“国家A”的元素内部都会采用转义HTML实体的解析模式。
是的，作为无语义的块级元素，div也属于“国家A”。

HTML中字符所代表的意义是根据上下文决定的，在一个div内部，一个 < 既可能是一个新标签的开始，也可能是代表小于号。

可能作为标签的起始被解析的 < 成为了安全隐患。攻击者只需要观察哪里可以输出raw html，然后构造一个输入 <script></script> 即可，script标签可以发挥想象力，做任何脚本能做的事情，等着这个raw html输出到千万用户的浏览器中，script被正确解析，相关脚本被正确执行。

然而，如果你如果正确转义了用户输入的内容，那么给千万用户的浏览器的内容，就是 <script></script> 。

我们回到“国家A”，“国家A”属于转义HTML实体的那一类国家。此外，转义后的HTML实体，不会有歧义， < 将代表 < ，永远不会被当作标签起始来看待，因此用户这边，script不作为script而作为文本解析，相关脚本不会执行，规避了这样的安全问题。

react这里有一系列不一样的处理方式：

• 静态内容，即JSX里面的静态部分如 <div>First · Second</div> 是不转义 & 的
• 动态内容，换言之有可能源自用户输入的内容，react将默认做严格的转义处理：敏感字符 <>& 等htmlspecialchars转义为它们的实体形式，以防止XSS注入问题。
• 对于我们硬要直接提供给浏览器不做转义的内容，react提供了 dangerouslySetInnerHTML 的方案

而HTML实体 · 这样的形式，在国家A中，需要正确解析为 · ，必须不转义 & 为 & ，否则将看到 · 而非你想要的实体对应的 · 。

选择不由react转义 & ，同时希望输入 · 输出 · ，只有用 dangerouslySetInnerHTML 的方案，这里面是很不安全的，因为敏感字符未作转义，原样输出。
而使用字符本身，在上面这个例子中是 · ，则规避了转义or not转义的安全问题。

基本上就是很浅显的讲解，XSS部分是一个最愚蠢的例子，想要了解更多，可以点一下下面的链接：

• “国家A”是什么？其他的分类对应的输出呢？
• 在哪些上下文中，什么特殊字符得到转义？
• HTML中如何展示标签文本如 <script> 而避免解析？
• 除了最愚蠢的script直接注入以外，还有其他的空中三百六十度体转XSS注入方式