«сообщение»:»недопустимый токен csrf»,»код»:»EBADCSRFTOKEN»

#node.js #typescript #express #ejs #csrf

Вопрос:

Я прочитал все подобные вопросы в stackoverflow, я проверил проблемы на csurf странице github, но не смог разобраться в проблеме. Это файл промежуточного программного обеспечения express:

 const app = express();
const csrfProtection = csrf();
const MongoDBSessionStore = MongoDBStore(session);
const store = new MongoDBSessionStore({
  uri: process.env.MONGODB_URI!,
  collection: "sessions",
});
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));
app.use(favicon(path.join(__dirname, "public", "favicon.ico")));
app.use(cors());
app.use(express.json());
app.use(multer({ storage: fileStorage, fileFilter }).single("image")); //arrray for multiple
app.use(express.static(path.join(__dirname, "public")));
app.use("/images", express.static(path.join(__dirname, "images")));
app.use(helmet());
app.use(compression()); 
app.use(
  session({
    name: "ts-authentication-app",
    secret: process.env.SESSION_SECRET!,
    resave: false,
    saveUninitialized: false,
    store: store,
  })
);
app.use(csrfProtection);
app.use(flash());
app.use(isAuthroized);
app.use((req, res, next) => {
  res.locals.isAuthenticated = req?.session?.isLoggedIn;
  res.locals.csrfToken = req.csrfToken();
  console.log("token", req.csrfToken());
  next();
});

app.use("/admin", adminRoutes);
app.use(shopRoutes);
app.use(authRoutes);
app.get("/500", errorController.get500);
app.use(errorController.get404);
app.use(morgan("combined", { stream: morganLogStream }));
app.use(errorHandler);
 

Я использую механизм шаблонов ejs. Вот шаблон входа в систему.

 <form class="login-form" action="/login" method="POST" >
            <div class="form-control">
                <label for="email">E-Mail</label>
                <input 
                    class="<%= validationErrors.find(e => e.param === 'email') ? 'invalid' : '' %>"
                    type="email" 
                    name="email" 
                    id="email" 
                    value="<%= oldInput.email %>">
            </div>
            <div class="form-control">
                <label for="password">Password</label>
                <input 
                    class="<%= validationErrors.find(e => e.param === 'password') ? 'invalid' : '' %>"
                    type="password" 
                    name="password" 
                    id="password" 
                    value="<%= oldInput.password %>">
            </div>
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <button class="btn" type="submit">Login</button>
        </form>
 
  • csrfToken представлен в шаблоне. Когда я меняю тип «скрытый» на «текстовый», я вижу маркер на странице.
  • Я прокомментировал каждое промежуточное программное обеспечение, чтобы узнать, не вызывает ли какая-либо из промежуточных программ проблему, но я все равно получаю ошибку.
  • Я зарегистрировал объект req и csrfToken: [Function: csrfToken], прикреплен к объекту запроса.

Я все еще не мог разобраться в этой проблеме.

Ответ №1:

Похоже, у вас нет правильного синтаксического анализатора тела, настроенного для типа кодировки, который вы используете для своей формы, то есть по умолчанию x-www-form-urlencoded .

Express предоставляет такой синтаксический анализатор тела, просто добавьте его в свой стек промежуточного программного обеспечения следующим образом:

 app.use(express.urlencoded({ extended: false }))
 

Комментарии:

1. Я знал, что совершил глупую ошибку. Я работал над этим неделями, чтобы разобраться самостоятельно :(. Спасибо!