关于前端的安全之XSS和CSRF攻击

这里的很多是参考了一些博文而整理归纳的。
https://blog.csdn.net/liushijun_/article/details/91410976
https://segmentfault.com/a/1190000016551188

对于前端的页面有一定的独特性，比如我们经常有这种经历就是直接打开一个页面console面板直接在console里面就可以执行你的js代码就可以了。在这里就可以拿到写在cookie、sessionstorage 和localstorage里面的数据。就是碰到脚本就可以执行。所以如果是用户在提交的时候提交了一段脚本，而这段脚本没有经过过滤又刚好在前端执行了，这就形成了一个完成的xss攻击。

XSS（CRoss Site Scripting, 跨站脚本攻击）
字面意思是跨站脚本攻击。
首先可能出现这种问题的情况
1、url访问时提交的
2、页面表单提交数据

例如：http://xxx/search?keyword=">
form表单输入提交等时候
解决：讲表单提交的内容进行转义，使其成为一个不可执行脚本。

function htmlEscape(text){
  return text.replace(/[<>"&]/g, function(match, pos, originalText){
    switch(match){
    case "<": return "&lt;";
    case ">":return "&gt;";
    case "&":return "&amp;";
    case "\"":return "&quot;";
  }
  });
}

3、访问第三方script的时候
4、页面的内联方法 比如javascript:alert() 这类写法
5、cookie 这个可以通过设置http-only的方式
Set-Cookie: USER=123; expires=Wednesday, 09-Nov-99 23:12:40 GMT; HttpOnly

CSRF攻击

用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行

这种常用的就是同源检查和token的检查