前端XSS与XSRF攻击与防范

XSS攻击:只要输入的JS在页面中以不符合开发者的预期进行运行都属于XSS攻击。例如：文本框输入、URL输入等
XSS攻击防范：
1.通过转义来解决，使得<script>的"<"或">"转义为其它符号，显示时再由其它符号变回原状。
2.XSS攻击很大程度上是为了获取cookie以盗取登录状态，可以在服务端设置cookie参数http-only使得客户端无法读取cookie

CSRF攻击：跨域站点伪造
概念：↓

1.GET攻击

用户Alice登录访问某有CSRF漏洞的银行网站 http://www.examplebank.com。
Alice被某些信息诱导访问危险网站B。
危险网站B上有一个<img>标签<img src="http://www.examplebank.com/from=Alice&amount=100&to=Bob">
这个img标签的src不指向图片，而是一个http请求，这个请求让银行服务器从Alice转100到Bob账户上，由于Alice已经登录，浏览器发请求时候会带上cookie骗取服务器信任得到响应。
这样Alice的钱就被悄悄转走了。

2.POST攻击

危险网站伪造一个隐藏的表单，在onload事件中，触发表单的提交事件。 
为防止form表单跳转，请参考 https://www.jianshu.com/p/75c782eddd80

为了对CSRF进行防范，首先需要知道攻击场景的特点：
1.B网站向A网站请求
2.带A网站Cookies，但是B拿不到cookie，也看不到cookie内容
3.不访问A网站前端
4.referer为B网站

1.禁止第三方网站带Cookies
same-site属性:Strict,Lax 关于same-site的文档：https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
后端设置：header('Set-Cookie: test=12345; SameSite=Lax')
缺点：兼容性，使用之前可以上caniuse查询支持

2.验证码（针对攻击场景第三条）
B不访问A网站前端，所以在A前端页面加入随机验证码来识别请求是不是用户主动发起的。B网站无法伪造一个完整请求。
node中ccap模块可以生成验证码：npm install ccap
优点：简单粗暴，低成本，可靠。
缺点：用户不友好。每次都要填，验证码输入错误要重填。

3.检查网页来源（针对攻击场景第四条）
referer是HTTP请求头，包含请求来源地址。【正确单词是referrer，但是规范中就是错的】
服务器验证referer并禁止来自第三方网站的请求。
后端参数由req.headers.referer拿到。
需要注意的是，file本地协议访问和http协议访问有点不一样，不会发送referer。
不考虑边界情况的基础防范：
if(/^https?:\/\/localhost/.test(referer)){
    throw new Error('非法请求'); 返回403提示等错误处理
}

缺点：Referer值会记录访问来源，有些用户认为侵犯自己隐私权，有些用户可能会开启浏览器防止跟踪功能，不提供Referer，导致正常用户请求被拒绝。 

4.可读取cookie
提交表单数据时，前端需要再次输入用户密码，后端通过后返回一个可读cookie，此时前端提交表单，并但上此cookie的值

5.token
登录成功后，后端返回一个token。下次前端提交表单时，必须带上这个token