TanStackT
TanStack•5mo ago
efficient-indigo

CSRF Protection

I'm building an app with Tanstack start + Supabase and thought I'd ask Cursor to do a security audit and it gave CSRF protection ad a critical security issue.

Is there an elegant way of adding CSRF protection into my mutation routes? Or does Tanstack start have a nice built-in way to handle CSRF?

Here's an example of how most mutations are created in my app

export const createSomething = createServerFn({ method: 'POST' })
  .validator(data => createSomethingSchema.parse(data))
  .handler(
    withAuth(async ({ supabase, data }) => {
      const something = await supabase.from('something').insert(data).select();
      return something;
    })
  );

export function useCreateSomething() {
  return useMutation({
    mutationFn: (data: CreateSomethingForm) => createSomething({ data }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['something'] });
    },
  });
}


Here's the CSRF issue highlighted in Cursor's audit of my app:

Issue: No CSRF tokens or protection mechanisms are implemented for form submissions and API calls.

Risk: Attackers can perform actions on behalf of authenticated users through cross-site request forgery attacks.

Recommendations:

Implement CSRF tokens for all state-changing operations

Use SameSite cookie attributes

Add CSRF middleware to server functions
Was this page helpful?