安全-同源策略
https://stackoverflow.com/questions/33644499/what-does-it-mean-when-they-say-react-is-xss-protected

React jsx中默认会转义动态内容

https://zh-hans.reactjs.org/docs/introducing-jsx.html#jsx-prevents-injection-attacks
image.png

dangerouslySetInnerHTML 风险

https://zh-hans.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
image.png

xss案例—存储型 XSS

为了用户体验,搜索结果页对匹配到的搜索词进行高亮显示
image.png
高亮就需要用单独使用标签,设置高亮色,就需要使用dangerouslySetInnerHTML插入
image.png
如果有恶意内容,比如某个文章标题设置为(
image.png
因为dangerouslySetInnerHTML插入,导致script 脚本执行
image.png

解决

转义
https://github.com/leizongmin/js-xss

  1. dangerouslySetInnerHTML={{
  2. __html:
  3. xss(titleNode, {
  4. whiteList: {
  5. span: ['class'],
  6. },
  7. }) || '',
  8. }}