XSS攻击
攻击者通过嵌入恶意脚本让浏览器执行某些操作或是获取用户信息叫XSS（Cross Site Scripting），又叫跨站脚本攻击。为了和CSS区分，所以叫XSS。
通过XSS，可以完成的一些事：
- 获取Cookie
- 监听用户行为，获取用户
- 修改DOM伪造登录表单
- 恶意弹窗或是广告
XSS攻击又分成三类
存储型
存储型，就是攻击者将恶意代码提交到数据库，浏览器通过请求服务器获取数据在浏览器执行，从而达到攻击目的。像论坛网站这样的，在评论区提交，如果有其他用户看到这评论触发代码执行到达攻击目的。
反射型
反射型就是恶意脚本是网络请求的一部分，服务器没有处理直接返回浏览器显示执行。https://test.com?x=<script>alert(1)</script>
如这样的 x 参数，直接在浏览器显示就会执行。
文档型
文档型（又叫DOM型），其实也是属于存储型或者是反射型的一种的。就是利用DOM对象中某些属性会触发JS脚本操作，而XSS代码操作DOM对象，这存储型和反射型都可以做到，关键是看XSS代码具体实现。比如 <img src=x onerror=alert(1)>。
防范措施
知道攻击原理了，可以根据这些原理来防范。首先，这些XSS代码的来源是用户输入的数据，其次是这些数据没有过滤直接在浏览器显示而执行，所以可以这样做：
1、可以限制用户输入部分数据，如 < > script 等，但这样会影响用户体验；
2、对用户输入的数据在浏览器显示的都转义，如 <转成 < 、 > 转成 >，等，转义后浏览器不会执行这些代码了，只会当作文本显示；
3、XSS攻击可以获取Cookie，我们可以把Cookie的一个属性 httpOnly 设成false，限制JS代码不能获取Cookie，这样也达到防御的一种手段。
4、XSS脚本可以伪造表单或是加载其他脚本资源，可以利用浏览器的CSP(Content-Security-Policy 内容安全策略)，限制可以从哪些域获取资源或是提交表单
总结
XSS攻击就是用户输入不干净的数据，到浏览器显示后部分内容当代码执行了。可以从源头防御不让执行，也可以从XSS攻击表现阻止某些行为。
CSRF攻击
CSRF (Cross-site Request Forgery)，即是跨站请求伪造。当你在A站登录后，到B站访问，如果B站存在恶意链接，点进去后，利用你在A站的登录信息模仿你的请求，但服务器不知道你是真的假的，因为你带了A站的cookie，里面有你的登录信息，这样你就被攻击了。
比如，在 http://a.com 登录后 到 http://b.com 上后到一张图，图片是带有链接的<a href=http://a.com?user=xx&p=xxx><img alt=美女图></a>，当你点了图片后，就会发起http://a.com?user=xx&p=xxx GET 请求，因为之前你在http://a.com 登录过了，所以浏览器会带上 http://a.com 的cookie。当然攻击者也可以构造POST等其他的请求来模仿你的操作，服务器识别不了，就当作你的操作了，实际不是你的操作。
从上面描述就是第三方网站可以获取你的cookie信息，然后服务器存在验证漏洞，不能识别真的你。
防御措施
1、验证请求来源站点，验证请求头上的origin 和 referer（chorme高级版本，跨域时不会携带请求参数queryParams）是否来自可以信任的地址，不信任的可以禁止请求（防盗链），返回错误。当然这两个是不安全的，在客户端发的时候可以修改。
2、使用cookie的SameSite属性，这有三个值Strict, Lax, None。
当cookie的SameSite设置成 Strict 时，禁止第三方请求携带cookie。比如在其他网站 http://x.com 中发起 http://a.com网站的请求，都不会带上后者的cookie。
设置 Lax 可以允许第三方网站的get请求携带cookie，其他请求禁止。
设置 None 时，默认都可以。
当然这里设置 Strict 时看下是否影响网站的其他功能，如埋点。
3、CSRF Token，当用户登录成功后，服务器生成一个token返回给页面，随后每次请求都带上这个token，验证这个token是否正确。通常来说第三方很难拿 这个token，这样就可以防御攻击了。
总结
CSRF攻击就是利用服务器验证漏洞，和第三方网站发起已登录网站的请求可以携带后者的cookie。