如何使用Apollo和GraphQL在Nextjs中实现CSRF保护

在Nextjs存储库中的此示例之后，我想实现CSRF保护（也许使用csurf程序包），因为我正在使用带有Express-Session的会话ID Cookie。

我尝试在自定义服务器中设置csurf并将生成的令牌保存在res.locals.csrfToken中，该页面在第一次加载时就可以通过示例中/lib/withApollo.js中的静态方法“ getInitialProps”获取链接。一旦我尝试更改页面（带有链接）或尝试使用apollo（例如登录）发出发布请求，服务器便更改了csrf令牌，因此Apollo使用的令牌不再有用，因此我得到了“ csrf无效”错误。

具有csurf配置的自定义服务器

const csrf = require('csurf');
const csrfProtection = csrf();
////express-session configuration code////
app.use(csrfProtection);
app.use((req, res, next) => {
    res.locals.csrfToken = req.csrfToken();
next();
})

/lib/initApollo.js

function create(initialState, { getToken, cookies, csrfToken }) {
  const httpLink = createHttpLink({
    uri: "http://localhost:3000/graphql",
    credentials: "include"
  });

    const authLink = setContext((_, { headers }) => {
    const token = getToken();
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
        Cookie: cookies ? cookies : "",
        "x-xsrf-token": csrfToken ? csrfToken : ""
      }
    };
  });

/lib/withApollo.js

static async getInitialProps(ctx) {
  const {
    Component,
    router,
    ctx: { req, res }
  } = ctx;
  const apollo = initApollo(
    {},
    {
      getToken: () => parseCookies(req).token,
      cookies: req ? req.headers.cookie : "",
      csrfToken: res ? res.locals.csrfToken : document.cookie
    }
  );

使用此配置，可以保护每条路由免受csrf的侵害，但是服务器上创建的令牌通常会更改，并且Apollo无法在需要时立即检索更新的令牌，因此第一次加载成功，但是随后的页面更改（链接）或任何发布请求失败，因为令牌已更改。

更新资料

经过如此多的浏览，我终于能够发送csrf cookie。我认为问题在于单词return。当您使用return时，它会排除cookie。这是我通过编辑所做的/lib/initApollo.js。

函数create（initialState，{getToken，Cookies，csrfToken}）{ const httpLink = createHttpLink（{ uri：“ http：// localhost：3000 / graphql”，凭据：“包括” }）; const authLink = setContext（（_，{headers}）=> { const token = getToken（）; 返回{ 标头：{ ...标题授权：令牌？`Bearer $ {token}`：“”， “ x-xsrf-token”：csrfToken？csrfToken：“” } 饼干： { ...饼干 } }; }）;

e！但是，SSR没有cookie。我认为我们应该有两个来自客户端的端点，另一个应该是SSR。SSR网址可以被csrf豁免。