参考文章： developer.mozilla.org/zh-CN/ 《前端面试宝典》
XSS
跨站脚本攻击（Cross Site Scripting）, 简写和css名称冲突， 改成xss。 攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。当被攻击者登陆网站时就会自动运行这些恶意代码，从而，攻击者可以突破网站的访问权限，冒充受害者。
XSS 攻击可以分为3类：存储型（持久型）、反射型（非持久型）、DOM 型。
- 存储型 XSS
注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。
- 反射型 XSS
当用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。Web服务器将注入脚本，比如一个错误信息，搜索结果等 返回到用户的浏览器上。由于浏览器认为这个响应来自"可信任"的服务器，所以会执行这段脚本。
- 基于 DOM 的 XSS
通过修改原始的客户端代码，受害者浏览器的 DOM 环境改变，导致有效载荷的执行。也就是说，页面本身并没有变化，但由于DOM环境被恶意修改，有客户端代码被包含进了页面，并且意外执行。
XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站
- 修改html， 例如通过url获取参数
url输入：
http://www.domain.com?name=<script>alert(1)</script>
dom中获取url参数：
<div>{{name}}</div>
结果：
上述 URL 输入可能会将 HTML 改为
<div><script>alert(1)</script></div>，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是 DOM-based 攻击。
- 执行js代码， 例如发布的一片文章中包含一段代码
文章中包含<script>alert(1)</script>， 那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击，也可以说是 DOM-based 攻击，并且这种攻击打击面更广。
如何防御xss攻击
- 最普遍的做法是转义输入输出的内容，对于引号，尖括号，斜杠进行转义
function escape(str) {
str = str.replace(/&/g, '&')
str = str.replace(/</g, '<')
str = str.replace(/>/g, '>')
str = str.replace(/"/g, '&quto;')
str = str.replace(/'/g, ''')
str = str.replace(/`/g, '`')
str = str.replace(/\//g, '/')
return str
}
- 对于显示富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法，当然也可以通过黑名单过滤
CSRF
跨站请求伪造（CSRF）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。例如，这些非预期请求可能是通过在跳转链接后的 URL 中加入恶意参数来完成:
<img src="https://www.example.com/index.php?action=delete&id=123">
对于在 www.example.com 有权限的用户，这个 标签会在他们根本注意不到的情况下对 www.example.com 执行这个操作，即使这个标签根本不在 www.example.com 内亦可。
简单点说，CSRF 就是利用用户的登录态发起恶意请求。
如何防御CSRF
防范 CSRF 可以遵循以下几种规则：1. Get 请求不对数据进行修改 2. 不让第三方网站访问到用户 Cookie 3. 阻止第三方网站请求接口 4. 请求时附带验证信息，比如验证码或者 token
二者比较
XSS利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。
