前端安全之CSRF（附场景）

前言

CSRF(Cross-site request forgery)既跨站伪造请求，已登录的网站 (携带Cookie), 若无安全防范，便可被第三方网站伪造请求进行攻击

CSRF有哪些场景？

• GET请求攻击场景
  假设接口[GET]website.com/delete 可删除用户某些信息
  第三方网站 直接通过img、iframe、script等标签，便可直接伪造website.com/delete 请求，website.com登录携带cookie的条件下，便能进行请求伪造，便可绕过用户操作，直接调接口，危害用户信息

  <img src="https://website.com/api" />
  

• POST 请求攻击场景
  可以通过form表单便可直接伪造POST请求，用户打开第三方网站，第三方网站同样伪造了删除用户信息的接口

  <form action="https://website.com/delete" method="POST"></form>
  <script>document.forms[0].submit()</script>
  

如何预防？

• 添加验证码校验

  涉及高危操作的接口（权限操作、登录等场景），添加验证码校验

• Cookie 通过SameSite属性控制可访问范围 MDN地址

• Referer/Origin校验 通过浏览器携带的Referer/Origin属性，判断请求是由哪个网站发起，只限制白名单地址

• Anti-CSRF-Token (终极策略)

1. 首先服务端生成一个随机Token放在cookie中
2. 接口请求的时候携带这个Cookie的Token 以及 通过request header/api params的形式 传递同一个Token
3. 若是第三方伪造请求，则只会携带Cookie的Token，而原网站（website.com）通过request header/api params的形式传递的Token不会一同携带。接口便能依靠这点 判断Cookie携带的Token 和 request header/api params是否一致来判断请求是否是伪造请求