CSRF Yoga Graphql

[enri90]

how to integrate CSRF Prevention in urql with yoga graphql?

https://the-guild.dev/graphql/yoga-server/docs/features/csrf-prevention

const csrfToken = req.headers['x-csrf-token']


fetchOptions: () => {
      return {
        credentials: 'include',
        ...(csrfToken && { headers: { 'X-CSRF-Token': csrfToken } })
      }
},


error: CombinedError: [GraphQL] Required CSRF header(s) not present

[kitten]

It depends on what you configured the CSRF header to be named. I'd assume that in your example code, the custom header is sent but itay not match the one that your API is expecting.

Therefore, I'd check the browser devtools' network tab, double check the request headers, then see what header you've configured your API to expect

[enri90]

I understand the problem but I don't know how to tell yoga in the option request to response with the csrf token header

export const yoga = createYoga({
  
context:  
initialContext.res.setHeader('x-csrf-token', tokens.create(secret));

  
const server = createServer(yoga);

server.listen(port, () => {
  console.info(`Server is running on http://localhost:${port}`);
});

[enri90]

i tried to build with a plugin in yoga
now the challenge stays in urql it doesn't read me the token from the request option

import { ServerAdapterPlugin } from '@whatwg-node/server';

import csrf from 'csrf';
const tokens = new csrf();
const secret = process.env.SECRET_CSRF as string;

declare global {
  interface Request {
    tokenCsrf: string;
  }
}

export function useCSRF<TServerContext>(): ServerAdapterPlugin<TServerContext> {
  return {
    onRequest({ request }) {
      request.tokenCsrf = request.headers.get('X-CSRF-Token') || ''; // tokens.create(secret); //new CookieStore(request.headers.get('cookie') || '');
    },
    onResponse({ request, response }) {
      if (request.method === 'OPTIONS') {
        response.headers.set('X-CSRF-Token', tokens.create(secret));
      }
    },
  };
}