Next.js 和 csrf 令牌返回服务器端错误答案

【问题标题】：Next.js and csrf token returns server side errorNext.js 和 csrf 令牌返回服务器端错误
【发布时间】：2022-01-19 22:19:24
【问题描述】：

我正在使用库 next-csrf (https://github.com/j0lv3r4/next-csrf) 来保护我的 next.js 应用程序中的 api 路由。

我按照文档进行操作，但 api 现在返回错误 500：

{"message":"Signed cookie string must be provided."}

代码如下：

/lib/csrf.js:

import { nextCsrf } from 'next-csrf';

const options = {
  secret: `${process.env.CSRF_SECRET}`,
};

export const { csrf, csrfToken } = nextCsrf(options);

调用api的页面：

import { useState, useEffect } from 'react';
import axios from 'axios';
import { withRouter } from 'next/router';

import { Page, PostBlock } from '@/components';


const Main = ({ router, csrfToken }) => {
  const [postsData, setPostsData] = useState({ posts: [], page: 0, pages: 0 });

  function fetchData() {
    axios
      .get('/api/articles', {
        headers: { 'XSRF-TOKEN': csrfToken },
        params: {
          page: router.query?.page,
          lang: router.locale,
          tag: router.query.tag,
        },
      })
      .then(response => {
        setPostsData(response.data);
      })
      .catch(error => console.log(error));
  }

  useEffect(() => {
    fetchData();
  }, []);


  return (
    <Page title='Home' className='home-template'>
      <div id='grid' className='post-grid'>
        {postsData.posts?.map(post => {=
          return (
            <PostBlock
              featured={post.featured}
              key={post.slug}
            />
          );
        })}
      </div>
    </Page>
  );
};

export default withRouter(Main);

令牌有效，我可以在网络选项卡中看到标题：

API 路由：

import { getPosts } from '../../../utils/index';

import { csrf } from '../../../lib/csrf';

function handler(req, res) {
  const {
    query: { page, lang, tag },
    method,
  } = req;

  switch (method) {
    case 'GET':
      const posts = getPosts(page, lang, tag);
      res.status(200).json(posts);
      break;
    default:
      break;
  }
}

export default csrf(handler);

还有另一件事发生。如果我尝试从邮递员调用 api，则 api 有效。我可以看到里面有一个带有“XSRF-TOKEN”值的 cookie，我没有以任何方式设置它，所以我不确定 Postman 从哪里得到它：

我该如何解决这个问题？

【问题讨论】：

标签： javascript next.js csrf

【解决方案1】：

只有在cookie value is not a string 的情况下才可能出现此类错误消息。并且根据 next-csrf getCookie code cookie 值可能不是字符串，仅在有一些 cookie 但不是必需的情况下。

next-csrf 转译中有一个错误，导致代码从行 52 移动到行 26，跳过一些检查并更改程序逻辑。你可以在这里看到它https://unpkg.com/browse/next-csrf@0.1.2/dist/next-csrf.js，在第 1891 行。

现在：

为避免这种情况，您应该在没有设置任何 cookie 的情况下发送第一个请求。看起来这就是 Postman 所做的，这就是它在 Postman 中工作的原因。
需要对 getCookie 的代码进行修复。该函数应返回字符串，而不是字符串或未定义。

此外，如果没有适当的转译问题解决方案，我不建议您使用此库。

Postman收到cookie，因为next-csrf中间件defines set-cookie头，如果第一个请求中没有。

【讨论】：