CSRF Token is not set..How to set CSRF cookie in Typescript？

CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种网络攻击方式，攻击者通过伪造用户的请求来执行非预期的操作。为了防止这种攻击，通常会在服务器端生成一个CSRF Token，并将其设置在Cookie中，客户端在发送请求时需要携带这个Token。

在TypeScript中设置CSRF Cookie可以通过以下步骤实现：

1. 安装必要的依赖

首先，确保你已经安装了cookie-parser和csurf这两个库，它们分别用于解析Cookie和处理CSRF保护。

npm install cookie-parser csurf

2. 配置CSRF保护

在你的Express应用中配置CSRF保护，并设置CSRF Token到Cookie中。

import express from 'express';
import cookieParser from 'cookie-parser';
import csrf from 'csurf';

const app = express();
app.use(cookieParser());

// 创建CSRF保护中间件
const csrfProtection = csrf({ cookie: true });

// 设置CSRF Token到Cookie
app.use((req, res, next) => {
  res.cookie('XSRF-TOKEN', req.csrfToken(), { httpOnly: false });
  next();
});

// 使用CSRF保护中间件
app.get('/form', csrfProtection, (req, res) => {
  res.send(`
    <form action="/process" method="POST">
      <input type="hidden" name="_csrf" value="${req.csrfToken()}">
      <button type="submit">Submit</button>
    </form>
  `);
});

app.post('/process', csrfProtection, (req, res) => {
  res.send('Data processed');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3. 解释关键点

• cookie-parser: 这个中间件用于解析请求中的Cookie。
• csurf: 这个库提供了CSRF保护功能。通过设置{ cookie: true }，它会自动将CSRF Token设置在Cookie中。
• res.cookie: 在每个请求中，我们手动设置XSRF-TOKEN Cookie，并将其值设置为当前的CSRF Token。注意这里设置httpOnly: false是为了让客户端JavaScript能够读取这个Cookie。
• 隐藏字段: 在表单中添加一个隐藏字段_csrf，其值为当前的CSRF Token，这样在提交表单时，Token会被一起发送到服务器。

4. 应用场景

CSRF保护广泛应用于需要用户认证的Web应用中，特别是在用户进行敏感操作（如修改密码、转账等）时，确保请求是由合法用户发起的。

5. 常见问题及解决方法

• Token未设置: 确保在每个请求中都正确设置了XSRF-TOKEN Cookie，并且在表单中包含了相应的隐藏字段。
• Token不匹配: 如果服务器端检测到Token不匹配，可能是由于Token过期或被篡改。确保客户端每次请求都携带最新的Token，并且服务器端正确验证Token。

通过以上步骤，你可以在TypeScript应用中有效地设置和使用CSRF Token，从而提高应用的安全性。