前端网路与安全：XSS和CSRF的基本概念、攻击原理以及防范措施是什么？

一、XSS跨站脚本攻击

攻击者想尽一切办法，将可以执行的代码注入到网页中。

1.1存储型

场景：常见于带有用户保存数据的网站功能，如论坛发帖，商品评论，用户私信等。

攻击步骤：

攻击者将恶意代码提交到目标网站的数据库中

用户打开目标网站，服务器将恶意代码从数据库取出，拼接在HTML中返回给浏览器

浏览器在收到响应后的数据解析执行，混在 其中的恶意代码同时也被执行

恶意代码窃取用户数据，并发送到指定的攻击者的网站，或者冒充用户行为，调用目标网站的接口，执行恶意操作

1.2反射型 

与存储型的区别在于存储型的恶意代码是存储在数据库中，反射型的恶意代码是在url上。

场景：url传递参数的功能，如我网站搜索，跳转等。

攻击步骤：

攻击者构造出特殊的URL,其中包含恶意代码。

用户打开带有恶意代码的URL时，网站服务器将恶意代码从URL中取出，并且拼接在html中返回给浏览器

用户浏览器接收响应后并解析执行，混在其中的恶意代码也被执行

恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定操作

1.3预防方案

防止攻击者提交恶意代码，防止浏览器执行恶意代码。

对数据进行严格的输出编码：

如对HTML元素的编码，js编码，css编码，url编码等。

避免拼接HTML，vue/react技术栈避免使用v-html/dangerouslySetInnerHtml

CSP HTTP Header，即Content-Security-Policy，X-XSS-Protection

增加攻击难度，配置CSP(本质是简历白名单，由浏览器进行拦截)

Content-Security-Policy:default-src-self,所有内容都来自同一个站点（不包括其子域名）

Content-Security-Policy：default-src-self *.trusted.com-允许内容来自信任的域名及其子域名（域名不必与SCP设置的所有域名相同）

输入验证：

比如一些常见的数字，url,电话号码，邮箱地址等等做校验判断。

开启浏览器的XSS防御，HTTP only cooki，禁止JavaScript读取敏感cookie，攻击者完成xss注入后无法窃取此cookie

验证码

二、CSRF:跨站请求伪造

攻击者诱导受害人进入第三方网站，在第三方网站中，向被攻击网站发起跨域请求，利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

攻击流程：

受害者登录a.com并保留登录凭证

攻击者引诱受害者访问了b.com

b.com向a.com发起了一个跨域请求，a.com/xxx浏览器会默认携带a.com的cookie

a.com接收到请求后，对请求进行校验，并确认是受害者的凭证，误以为是受害者自己发起的请求

a.com以受害者的名义这行了a.com/xxx

攻击完成后，攻击者在受害者不知情的情况下，冒充受害者让a.com执行自己的操作

攻击类型：

get类型：如果在页面的某个img中发起一个get请求

post类型：通过自动提交表单到恶意网站

链接类型：需要引诱用户点击链接

预防方案：

CSRF通常通过第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己对网站针对CSRF的防护能力来提升安全性。

同源检测：通过header中origin header、Refer header确定，但是不同浏览器可能会有不一样得实现。

CSRF Token校验：将CSRF Token输出到页面，页面提交请求携带token，服务器校验token是否正确。

双重cookie校验：

流程：

1、在用户访问网站页面的时候，向请求域名注入一个cookie，内容为随机字符串

2、在前端向后端发起请求的时候，取出cookie，并添加到url参数中

3、后端接口验证cookie中的字段与URL参数的字段是不是一致，不一致，直接拒绝。

有点：

无需使用session，使用面广，易于实施。

token存在客户端，不会给服务器造成压力

相对于token，实施成本更低，可以在前后端统一拦截校验，而不需要一个个接口和页面添加。

缺点：

cookie中增加了额外的字段

如果有其他漏洞，攻击者可以注入cookie，该防御失效

为确保cookie传入安全，采用这种方式方式最好确保使用https方式，否则会有风险

 

samesite cookie属性：Google起草了一份草案来修改http协议，那就是set-cookie响应头新增samesite属性，他同来表面这个cookie是同站cookie,同站cookie只能作为第一方cookie，不能作为第三方cookie，samesite有俩个属性值，strict为任何倾下都不使用第三方cookie，lax为可以使用第三方cookie，但是必须为get请求。