CSRF（Cross-Site Request Forgery）攻击是一种常见的网络攻击，攻击者通过伪造用户已登录的请求，来执行一些恶意操作，如转账、删除数据等。为了防止这种攻击，我们需要在前端应用中实现 CSRF 防护。在本文中，我们将介绍如何在 Express.js 中实现 CSRF 防护。
什么是 CSRF 攻击？
在一个典型的 CSRF 攻击中，攻击者会向受害者的浏览器发送一个包含恶意代码的页面。当受害者访问该页面时，恶意代码会自动向目标网站发送一个请求，该请求会执行一些恶意操作，如转账、删除数据等。由于该请求是在受害者已登录的情况下发出的，因此目标网站会认为是受害者发出的请求，从而执行相应的操作。
如何防止 CSRF 攻击？
为了防止 CSRF 攻击，我们需要在前端应用中实现 CSRF 防护。常见的 CSRF 防护方式包括以下几种：
1. SameSite 属性
SameSite 属性是一种 Cookie 属性，可以防止跨站点请求伪造攻击。当设置了 SameSite 属性为 strict 或 lax 时，浏览器会限制跨站点 Cookie 的发送，从而防止 CSRF 攻击。在 Express.js 中，我们可以通过设置 Cookie 的 SameSite 属性来实现 CSRF 防护，示例代码如下：
app.use(cookieParser());
app.use((req, res, next) => {
res.cookie('csrf_token', 'token', { sameSite: 'strict' });
next();
});2. CSRF Token
CSRF Token 是一种防护 CSRF 攻击的常用方式。在每个请求中，服务器会生成一个随机的 Token，并将其存储在 Cookie 中。在表单提交时，该 Token 会作为隐藏字段一同提交，服务器会校验该 Token 是否正确。如果 Token 不正确，服务器会拒绝该请求。
在 Express.js 中，我们可以使用 csurf 中间件来实现 CSRF Token 的防护。示例代码如下：
const csrf = require('csurf');
app.use(cookieParser());
app.use(csrf({ cookie: true }));
app.use((req, res, next) => {
res.locals.csrfToken = req.csrfToken();
next();
});在上面的示例代码中，我们使用了 csurf 中间件来生成 CSRF Token，并将其存储在 Cookie 中。在每个请求中，我们可以通过 req.csrfToken() 来获取 CSRF Token，并将其作为隐藏字段一同提交。
3. Referer 验证
Referer 验证是一种基于 HTTP Referer 头的 CSRF 防护方式。在每个请求中，服务器会检查 Referer 头是否来自同一站点。如果不是，则服务器会拒绝该请求。
在 Express.js 中，我们可以通过设置中间件来实现 Referer 验证。示例代码如下：
app.use((req, res, next) => {
const referer = req.get('Referer');
if (referer && referer.startsWith('http://localhost:3000')) {
next();
} else {
res.status(403).send('Forbidden');
}
});在上面的示例代码中，我们通过检查 Referer 头来实现 CSRF 防护。如果 Referer 头来自同一站点，则允许该请求通过，否则拒绝该请求。
总结
在本文中，我们介绍了 CSRF 攻击的基本原理，并介绍了几种常见的 CSRF 防护方式。在 Express.js 中，我们可以使用 SameSite 属性、CSRF Token、Referer 验证等方式来实现 CSRF 防护。通过实现 CSRF 防护，我们可以有效地保护前端应用程序免受 CSRF 攻击的威胁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d1dc6cadd4f0e0ffa7413c