什么是 CSRF 攻击？
CSRF（Cross-Site Request Forgery）攻击也被称为 “One Click Attack” 或者 “Session Riding”，是一种非常常见的攻击方式。在 CSRF 攻击中，攻击者通过某些方式诱骗用户打开了一个攻击者构造的网页，在用户不知情的情况下，发送一个伪造的请求到被攻击网站上，从而实现攻击目的。
例如，当你在一个论坛网站上单击点赞按钮时，会向服务器发送一个点赞请求。但是，如果攻击者先诱骗你打开了一个他构造的网页，这个网页中包含一个伪造的请求，那么当你单击点赞按钮时，该请求将被发送到服务器上，从而导致未经授权的点赞操作。
CSRF 攻击如何影响前端应用？
对于前端开发者来说，保护网站免受 CSRF 攻击的责任非常重大。在没有应对 CSRF 攻击的保护措施的情况下，攻击者可以通过 CSFR 操作来实现以下攻击形式：
- 伪装用户：攻击者通过伪造请求，操作任何一个已知用户的账户，来进行其它犯罪行为；
- 偷取用户的敏感信息：攻击者可以从服务端获取到任何一个已认证用户的敏感数据；
- 进行网络欺诈：攻击者可以通过伪造请求，以用户身份执行任何取消或者修改账单、订单或者其他付款信息。
如何保护前端应用？
1. 防止 CSRF
1.1 HttpOnly Cookie
设置 HttpOnly 标记将 Cookie 作为 HTTP 响应 header 的一部分发送，防止攻击者通过 XSS 攻击获取 Cookie 内容。
-- -------------------- ---- -------
-- -- ------------- ----- -------- ------
--- ------------ - -------------------------
-------------------------------------------
-- -- -------- ------
---------------------- ------------- ---- -
--- ------------- - -
--------- ----
--
------------------------------ -------------------- --------------
---------------- --- ---- ------
---1.2 SameSite Cookie
SameSite Strict 是一种 Cookie 属性，它可以防止 CSRF 攻击。通过设置 Cookie 为 SameSite Strict 后，同站点 Origin 的请求才能带上 Cookie，其他站点的请求将被拦截。
-- -------------------- ---- ------- -- -- -------- ------ ----- ----------- - - ------- ------------------------ ------------ ----- --------------- ----------------- --------------- -- --------------------------- ----------------------- ----- ---------- ----- -------- -------- ------- -- - -- - -- - ----- -- -- ----- --------- -------- ----
1.3 CSRF Token
在前端界面解决 CSRF 攻击，使用 CSRF Token。前端存储 CSRF Token，每次向服务端发送请求时附加 CSRF Token。
-- -------------------- ---- -------
-- ------ ---- -----
---------------- ---------------------- ---- ----- -
----- ------ - --------------------
----- --------- - ----------------
----- --------------- - ------
--------------------- -------
------------------
------------------
-------------------- - ----------------
-------
---
-- ------- ---- -------- ---- -------
--------
---- --------------------
----- -------- ----------
----- -------
-------- ---------------- ---------------------------------------------
-------- -------------- ----- -
---------------------- ------
--
------ ----------------- ------- ------ -
-------------------- -------
-
---1.4 Referer Header
使用 Referer 头判定来源是否为本站，允许访问或者禁止访问。
app.use(function(req, res, next) {
if (req.headers.referer
&& url.parse(req.headers.referer).hostname === 'yoursitehostname.com') {
next();
} else {
res.status(403).send('Access denied');
}
});2. 服务端模板
服务端模板不支持 JavaScript，因此对于任何恶意代码，没有机会执行。相比于客户端模板，服务端模板在防止 XSS 和 CSRF 风险方面更为有效。
3. 使用 CSP
CSP（Content-Security-Policy）是 W3C 标准，它可建立白名单规则，来指定哪些内容可以被加载和执行，哪些不可以。通过实现 CSP，你可以大大降低 XSS (跨站脚本攻击) 和 CSRF（跨站请求伪造攻击）的风险。
总结
本文介绍了 CSRF 攻击的概念和影响，并提供了一些保护前端应用免受 CSRF 的指南。以上方法只是其中的一部分，希望能够设法实现简单的 CSRF 防护，以保护你的应用。
参考资料
- Express.js Security Best Practices
- How to Secure Your Express.js App
- Understanding and preventing CSRF attacks
- 防范 CSRF 攻击
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b14f4548841e9894da2c13