Next.js 和 csrf 令牌 returns 服务器端错误

Question

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

我按照文档进行操作，但是 api 现在 returns 错误 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);

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

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，我没有以任何方式设置它，所以我不确定邮递员从哪里得到它：

我该如何解决这个问题？

Answer 1

只有在 cookie value is not a string. And according to next-csrf getCookie code cookie 值可能不是字符串的情况下才会出现这样的错误消息，只有在有一些 cookie 而不是所需的 cookie 的情况下才会出现。

next-csrf 转译中有一个错误，它使第 52 to move to the line 26, skipping some checks and changing the program logic. You can see it here https://unpkg.com/browse/next-csrf@0.1.2/dist/next-csrf.js 行的代码出现在第 1891 行。

现在：

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

此外，我不建议您在未正确解决转译问题的情况下使用此库。

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

Next.js 和 csrf 令牌 returns 服务器端错误

Next.js and csrf token returns server side error

javascript

csrf

next.js