常见浏览器攻击方式与防护(CSRF&CORS&XSS

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

在开发应用的时候，一般都要考虑应用的安全性，大公司一般还会使用各种扫描代码强制要求修改一些不安全的代码，对于和前端浏览器交互的代码，一般要避免XSS，CSRF，CSRF。
这里说明下其原理，在代码审核不通过的时候，快速处理上线。

• CSRF ： Cross-Site Request Forgery 跨站请求伪造
• CORS ： Cross Origin Resourse-Sharing 跨站资源共享
• XSS ： Cross Site Scrit 跨站脚本攻击（为与 CSS 区别，所以在安全领域叫 XSS）

CSRF

主要步骤

1、你登录了银行站点A，保存了Cookie信息在站点中
2、这个时候访问站点B，站点B里面放了一些请求站点A的代码，访问B的时候会自动的成功请求A
3、在不知情的情况下，B站点已经从站点A拿到了你的数据，或者对你的信息做了一些处理。

防护方式

首先、站点B不是我们的站点，我们没办法控制。然后第一次请求A为正常请求，我们不能干扰用户进行拦截。
只有在第3次请求A的时候进行拦截，即拦截其他站点中的自动访问A的请求。

1、http请求一般可以传递param和设置自定义header。
2、在所有访问A的请求中加上一个自定义的param和header，专门用于防护crsf。
3、请求中必须存在这个专门的字段如 x-crsf-token、token等字段，并且字段的值是服务端传递过来的，才允许访问。
4、不让B拿到这个字段的值，那么所有站点B的请求访问A都会失败。
5、因此成功起到了csrf的防护作用。

如果是代码流程：
1、请求服务端拿到crsf的token值。
2、所有访问A的请求param或header中有个标记字段值和token值相同即可。
3、服务端会校验token值和存储的值是否相同。

其他防御方式

• 验证HTTP Refer字段，即请求的来源是否被允许。

• 用户侧：不要再访问个人财产页面之后，又乱点其他各种页面。

CORS

跨域资源请求，这个比CSRF更常用。如果说CSRF是浏览器自动发起的请求， 那么CORS就是手动构造的请求，期望其它站点能返回一些自己想要的资源。

比如：公司前后端分离，前端代码在域名A下面，后端应用绑定的域名是B，那么就要手动的设置允许A访问B的资源。

请求类型

浏览器将 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request)。

简单请求：
一般包括下面两种情况，情况描述请求方法请求方法为：HEAD 或GET或POST；HTTP头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。

请求流程

上面说了CORS可能是我们自己需要使用的，也可能不是我们期望的，因此需要再服务端代码中加上白名单控制。

主要过程：
1、浏览器构造CORS请求，请求中浏览器会自动加上Origin、或者Access-Control-Request-Method、Access-Control-Request-Headers字段。
2、服务端根据请求头中的字段判断要不要支持返回结果给端上。
3、如果允许返回给端上，那么在相应中加上请求中对应的字段值。

Access-Control-Allow-Origin：必填字段，表示允许的来源，如果是*代表任意域名。但是公司一般要求只能填固定的几个域名。
Access-Control-Allow-Credentials：该字段可选。布尔值，表示是否允许在 CORS 请求之中发送 Cookie 。若不携带 Cookie 则不需要设置该字段。

如果请求中有Access-Control-Request-Method这个Header，那么响应中需要有Access-Control-Allow-Methods对应到请求方法中，如果不一致则请求不生效。

同理Access-Control-Request-Headers => Access-Control-Allow-Headers两者要能对应的上。

核心处理

就是在CORS请求来的时候根据请求头判断要不要返回结果，响应头中带上本次处理的信息即可。

XSS

跨站脚本攻击，最常见的方式就是在自己的站点请求中有一不符合预期的请求对资源做一些处理。

如果说CRSF是其他站点的请求可以防御。
XSS就是自己站点内一些未预料到的请求。

经常见到的XSS攻击方式如下：

防护方式

对服务端来说，这些都是正常的请求，都需要返回的。
只能在返回的结果中做一些校验，如果有执行脚本让其失效即可。

在代码中就是处理<，>，&，"，'。等特殊字符。

最后

目前常见开发框架都已经集成了安全相关的包，使用也比较简单，这里就不赘述。
搞明白其原理，遇到代码扫描不通过的时候，很快就可以搞定了。