xss 怎么分类？怎么防御？

一、三类xss

（1）反射型 XSS（Reflected XSS）

• 搜索

后端返回“搜索不成功”数据

前端操作显示 “搜索{xxx}不成功”

此时【 xxx 】即可被人为操作

• 正常来说：

  • xxx = 哈哈
    
  • 就会显示：<span>搜索{哈哈}不成功</span>

• 也可被人为写成

  • xxx = <script>alert(1)</script>
  • 就会显示：<span>搜索 <script>alert(1)</script>不成功</span>

对于script标签会被解析执行 导致xss

（2）DOM 型 XSS（DOM-based XSS）

• url输入

前端数据从url中解析出来 显示/执行js代码

此时【url】中被解析部分被人为操作

• 正常来说是：

  • www.heihei.com/xxx = 哈哈
  • 就会显示：<span>单号：哈哈</span>

• 也可被人为写成

  • www.heihei.com/xxx = <script>alert(1)</script>
  • 就会显示：<span>单号：<script>alert(1)</script></span>

对于script标签会被解析执行 导致xss

（3）存储型 XSS（Stored XSS）

• 评论

存入数据库后、从数据库中取出 并显示

此时【评论】 被解析部分被人为操作

• 正常来说是：

  • 输入评论：老板最棒最漂亮！
  • 就会显示：<span>cc123nice说：老板最棒最漂亮！</span>

• 也可被人为写成

  • 输入评论： <script>alert(1)</script>
  • 就会显示：<span>cc123nice说：<script>alert(1)</script></span>

对于script标签会被解析执行 导致xss

二、react防止xss攻击

（1）自动转义

• React 在渲染 HTML 内容和渲染 DOM 属性时都会将 "'&<> 这几个字符进行转义

（2）JSX 语法

• JSX 实际上是一种语法糖，Babel 会把 JSX 编译成 React.createElement() 的函数调用，最终返回一个 ReactElement

三、react可能发生漏洞

（1）使用dangerouslySetInnerHTML

• 类似原生html直接拼接 不做赘述

（2）使用用户输入的值来渲染 a 标签的 href 属性，或类似 img 标签的 src 属性等

const userWebsite = "javascript:alert('xss');";
<a href={userWebsite}></a>

四、防御方法

（1）浏览器自带防御 （X-XSS-Protection ）

这种浏览器自带的防御功能只对反射型 XSS 有一定的防御力，其原理是检查 URL 和 DOM 中元素的相关性，但这并不能完全防止反射型 XSS，而且也并不是所有浏览器都支持 X-XSS-Protection。

• HTTP X-XSS-Protection 响应头是 Internet Explorer，Chrome 和 Safari 的一个功能，当检测到跨站脚本攻击(XSS)时，浏览器将停止加载页面。

（2）转义

主要就是对输入所包含的特殊字符进行转义，如 <，>，&，"，'，来防止 XSS 攻击。

• 当有大坏人想通过
  • 输入<script>alert(1)</script> 引发xss时
  • 输入的东西会先被转译成 "<script>alert(1)</script>"

转译后存入后端，当从数据库取出在前端显示时，html会自动转译回去 但并不是真正的<,>而是 <&gt

（3）CSP内容安全策略

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。
两种方法可以启用 CSP。

• 一种是通过 HTTP 头信息的 Content-Security-Policy 的字段。
  Content-Security-Policy: script-src 'self';...
• 另一种是通过网页的标签。
  <meta http-equiv="Content-Security-Policy" ... />

其中不符合的会被过滤 阻止可能是xss威胁的js加载