javascript - 为什么使用宽字符可以提高安全性

Question

在看react的教程的时候，里面说在JSX里面使用宽字符可以提高安全性。但是没有说明原因。
https://facebook.github.io/react/docs/jsx-gotchas.html

Answer 1

首先是XSS。

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

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

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

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

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

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

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

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

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

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

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

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