csrf
定义
csrf: 跨站请求伪造 cross site Request forgery 或者简称xsrf。
是指在挟持用户在当前已经登录的web应用程序当中执行非本意操作的攻击方法。
另一个是xss cross site script 跨站脚本攻击，两者区别是 xss利用用户对网站的信任，csrf利用的是网站对用户信任
简单来说就是利用用户的登录态发起恶意请求
利用用户的登录状态发起恶意请求
如何攻击的
如何防御
遵循以下几种原则:
1.get请求不对数据进行修改
2.禁止第三方网站访问到用户cookie
3.阻止第三方网站请求接口
4.请求时附带验证信息，比如tocken或者验证码
具体措施
SameSite
对cookie设置SameSite属性，设置之后cookie信息不会随着跨域请求发送，很大程度上减少CSRF攻击
验证referer
在对需要防范csrf的请求中，我们阔以根据请求头中的referer属性来判断请求来源
Token
服务器下发随机token，前端每次发请求携带token，后端验证token的有效性
防抓包
使用https替换http(https还是通过http进行传输，只是信息经过tls协议加密，对传输的数据进行加密，当请求的信息被抓包工具抓包时，无法修改提交的数据)
xss
xss cross site script 跨站脚本攻击
通过在客户端注入可执行脚本的方式实行攻击，例如在评论区植入js代码
主要方式
- 劫持Html ,通过script标签进行注入
- 在可执行的js中，通过拼接数据来执行恶意脚本
- 在页面可执行的dom元素，添加可执行代码，比如javascript:xx
- 在onload/onClick事件中注入不受控制的代码
XSS攻击类型
有存储型Xss 反射型Xss 以及DOM型Xss,跟前端有关的是DOM型Xss,其他防范主要在后端
存储型Xss
恶意脚本存储在后端数据库，然后又传输到前台页面，从而发生攻击。防范主要是通过文本转义，常见的是在评论区插入攻击脚本，如果脚本被储存到服务端，那么所有看见对应评论的用户都会受到攻击
反射型Xss
恶意脚本不是存储在后端，而是出现在url里，防范主要是区分两者主要看恶意代码的存储位置。
攻击者将脚本混在URL里，服务端接收到URL将恶意代码当做参数取出并拼接在HTML里返回，浏览器解析此HTML后即执行恶意代码
Dom型Xss
不需要跟后端交互，主要是通过劫持Html文件进行修改实现恶意代码的注入
在DOM api中通过 textContext/setAttribute来代替.innerHtml/docuemnt.write Vue中不建议用v-html
防范
转义
在存储型XSS和反射型XSS攻击中，这个是一个关键的防范方式，通过对不同类型的文本和数据做对应的转义或者过滤
CSP
通过在脚本增加 Content-security-Policy 字段来实现，开启csp,即开启白名单，可阻止白名单以外的资源加载和运行
1 | content-security-policy: default-src 'self' |
在较严格的CSP模式下，具有以下作用
1.禁止加载外域代码
2.禁止内联脚本执行
3.禁止外域提交
4.禁止未授权的脚本执行
5.通过csp上报 便于修复
httponly
cookie里的一个属性，主要防止cookie属性被改写，该属性主要是防止cookie被js获取，只能通过http传输和访问
httpOnly本质上不能防止xss攻击，主要是起到缓解作用，在恶意脚本执行之后无法获取cookie,防止下一步的攻击和用户数据泄露