什么是跨站请求伪造攻击？
跨站请求伪造攻击（Cross-Site Request Forgery，CSRF），是一种常见的 Web 攻击方式。攻击者通过伪造请求，让用户在不知情的情况下执行一些危险的操作，例如转账、修改密码等。
一个典型的 CSRF 攻击场景如下：
- 用户登录网站A，并获取一个有效的 session id；
- 用户访问攻击者制作的网站B，该网站上嵌入有一个隐藏的表单，该表单的目的是执行某一危险操作，例如修改用户密码；
- 用户在网站B上执行了某些操作，导致相关操作在网站A上被执行。
由于用户无法判断请求的来源，因此 CSRF 攻击相对来说比较难以防范，需要采取一些特殊的措施来保护 Web 应用程序。
Next.js 应用如何处理 CSRF 攻击？
Next.js 提供了一些内置的措施来处理 CSRF 攻击。我们可以使用其中的 csrfToken 方法和 csrfMiddleware 中间件来实现 CSRF 防御。
生成 CSRF Token
使用 csrfToken 方法可以生成一个 csrfToken，该 token 存储在 cookie 中，并将其传递给客户端。客户端需要将 csrfToken 作为参数或请求头的值之一，提交到服务器端。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
------ ------- -------- ----------- --------- -- -
------ -
----- ------------- ----------------------------------------
------ ---------------- ------------- ------------------------ --
-------
-----
------ ----------- ------------ --
--------
-------
--------
------ --------------- --------------- --
--------
------- ------------------ -----------
-------
-
-
------ ----- -------- --------------------------- -
----- --------- - ----- ---------------------
------ -
------ -
----------
--
-
-通常情况下，我们会将 CSRF Token 开启自动刷新，以保证每次请求都能获得最新的 token。在 Next.js 中，我们可以通过以下方式来开启自动刷新：
-- -------------------- ---- -------
------ - -------- - ---- ------------------
------ ------- -------- ----- ---------- --------- -- -
------ -
--------- --------------------------- ---------- ------------- -- ---
---------- -------------- --
-----------
-
-以上代码中，options.clientMaxAge 参数表示每次获取 CSRF Token 的有效时间。当过期后，客户端将会再次请求服务器以获取新的 CSRF Token。
使用 CSRF Middleware 防御 CSRF 攻击
使用 csrfMiddleware 中间件可以防御 CSRF 攻击。该中间件会验证请求中的 csrfToken 是否与服务器端存储的 CSRF Token 一致。
-- -------------------- ---- -------
------ - ---------- -------------- - ---- -----------
------ ------- -------- ------------ ---- -
-- ----------- --- ------- -
--- - ----- ------------------- ----
---------------------- -------- ----- ----- --------- --
- ---- -
---------------------- -------- ------ ------ --
-
-当客户端发起 POST 请求时，我们使用 csrfMiddleware 中间件来验证请求的 csrfToken 是否正确。
如果验证通过，则返回 CSRF Token verified，否则返回 invalid csrfToken，并从客户端返回一个 403 Forbidden 状态码。
总结
CSRF 攻击是一种常见的 Web 攻击方式，可以通过使用 csrfToken 方法和 csrfMiddleware 中间件在 Next.js 应用中防范。在生产环境中，我们需要开启自动刷新功能，以保证每次请求获取到的 Token 都是最新的。
在开发 Web 应用时，我们应该时刻关注安全问题，采取一些特殊的措施防范 CSRF 攻击等安全问题，保障用户和应用程序的安全。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646993f9968c7c53b0973b56