Description
作为前端工程师，每天与浏览器打交道是必不可少的。而安全是一个必须重视的话题，今天就来讲讲网络安全攻击之 XSS。
XSS
XSS 即 Cross Site Scripting（跨站脚本攻击），这种攻击发生在用户的浏览器上，它通常是利用漏洞把一些恶意内容存储到网站的服务器上，然后在服务器返回资源，浏览器解析 HTML 文档的过程中，执行恶意代码产生攻击。常见的就是通过 script 标签来进行攻击操作，script 标签可以突破浏览器的同源策略，进而有了很大的操作空间，比如读取网站的 cookie。通常有三种形式的 XSS 攻击。
存储型
存储型就是前面说的，通过某种形式把恶意代码存储到了数据库里，然后服务端把这些恶意代码取出拼接成 HTML 后返回给浏览器，浏览器执行解析 HTML 从而产生攻击。比如留言板功能，当网站渲染显示用户的留言时，通常是有对应的数据库查询操作，而用户提交的包含恶意代码的留言保存到数据库后，再次读取出来显示，就容易被攻击。
反射型
反射型通常是跟 url 有关，比如有这样的一个 url http://www.baidu.com?param=<script>alert(document.cookie)</script>，假设服务器在获取 param 参数时没有做任何过滤，就将其拼接成 HTML 返回给浏览器，那么浏览器在解析时执行时就容易被攻击，恶意脚本可以趁此获取网站的敏感信息如 cookie。这个过程就像，浏览器提交了数据给服务器，服务器响应后返回包含 XSS 的代码给浏览器，浏览器解析执行，如同 "反射" 一样。
DOM 型
DOM 型，这种攻击的特点是没有服务器的参与，完全是浏览器客户端自己的事，通常是用户使用页面的过程中修改了资源，比如 WiFi 路由器劫持，本地恶意软件劫持。
XSS 攻击带来的危害
- 通过 document.cookie 盗取用户 cookie
- 可以监听用户行为，比如通过 addEventListener 监听键盘事件，获取用户的银行卡信息
- 通过执行恶意代码，可以删除操控用户的数据
- 通过修改 DOM 生成假的登录窗口，欺骗用户输入敏感信息
- 生成浮窗广告，影响用户体验
防范 XSS 攻击
- 针对恶意代码执行问题，需要在显示的时候过滤转义掉诸如
& < > " ' /这样的特殊字符 - 针对读取 cookie 问题，需要在 http 请求头设置 httpOnly 属性，禁止 JS 脚本读取 cookie
- 开启内容安全策略（CSP），对外域做各种限制
CSP 通过指定有效域——即浏览器认可的可执行脚本的有效来源——使服务器管理者有能力减少或消除 XSS 攻击所依赖的载体。一个 CSP 兼容的浏览器将会仅执行从白名单域获取到的脚本文件，忽略所有的其他脚本 (包括内联脚本和 HTML 的事件处理属性)。
- 使用预编译模板技术，而不是简单的拼接字符串