在看react的教程的时候,里面说在JSX里面使用宽字符可以提高安全性。但是没有说明原因。
https://facebook.github.io/react/docs/jsx-gotchas.html
首先是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”是什么?其他的分类对应的输出呢?
- 在哪些上下文中,什么特殊字符得到转义?
- 而避免解析?
- 除了最愚蠢的script直接注入以外,还有其他的空中三百六十度体转XSS注入方式