什么是 CSRF 攻击？
CSRF（Cross-site request forgery）攻击指的是攻击者通过某些方式伪造用户身份并在用户不知情的情况下发起跨站请求，从而达到攻击目的的一种方式。常见的例子是在用户登录了一个网站，在浏览器中开启了该网站的 Cookie 之后，攻击者可以利用前端页面或脚本等方式发起一个包含可执行恶意操作的请求，并让用户误以为是自己在进行合法操作，从而导致攻击成功。
CSRF 攻击的危害
因为 CSRF 攻击往往能够直接绕过登录、权限验证等安全措施，所以一旦攻击成功，则可以对用户账户进行各种篡改、盗取信息等恶意行为，例如：修改密码、删除数据、转移资金等。
如何防范 CSRF 攻击？
方案 1: SameSite Cookie
SameSite Cookie 属性通过限制 Cookie 的传递来防止 CSRF 攻击，其本质是限制 Cookies 只有与原始请求来源相同的请求时，才会包括在其中。
在 Next.js 中实现 SameSite Cookie 很容易，只需要设置 cookieOptions 如下：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------- ----- ------- - --------------- ----- ---------- - - ----------- ---------- ------------------- -- --------------- ------------ ----------- - ------- -- - -- - -- - --- -- -------- ------ ----- -- -- ----- ---- -- -- ------ ------------- --------- --------- -- -- -------- ------ ----- ---
方案 2: CSRF Token
CSRF Token 是在前端页面上生成随机值并与后端接口一同传到服务器的一种方式。当后端接收到请求时，会比对 Cookie 中保存的 CSRF Token 值和请求头中的 CSRF Token 值是否相同，如果不同则拒绝该请求。
在 Next.js 中实现 CSRF Token 防御方案也已经内置了相关功能，只需要先在服务端生成一个 CSRF Token 并存储到 Cookie 中，然后在客户端获取该 Token 并添加在每一次请求头中：
-- -------------------- ---- -------
------ - ------------ - ---- ----------
----- ------- - ---------------
---------------------- -
------- -------
-------- -
--------------- -------------------
--------------- ----------------- -- - ----- -------
--
----- ----------------
----- ----------
---
--总结
以上两种防范 CSRF 攻击的措施都是常见的方案，可以部署到实际生产环境中。但需要注意的是，SameSite Cookie 在低版本浏览器中并不支持。如果需要从根本上解决 CSRF 攻击问题，那么建议在项目开发初期就设计出一个完整的安全架构，并将 CSRF 防御作为其中一个关键点来考虑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a86ea95b1f8cacd26ef1f