File upload not working with csrfPrevention

[ronald-truepill]

Hi, I'm implementing file upload in graphql using apollo-server-express and graphql-upload, but is not working as shown in docs for express
When I try to upload a file it throws this error

This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type'
header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a
non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight

The code to reproduce it is the same as the one here

How can I implement file upload with csrfPrevention enabled?

Note: The error appears with apollo server version 2 (setting uploads: false) and 3

[glasser]

Enabling CSRF prevention may require some client changes. What client are you using for your uploads? There are quite a few listed at https://github.com/jaydenseric/graphql-multipart-request-spec#client

I am realizing now that our belief of "Our CSRF prevention mostly affects GET, not POST, because POSTs use content-type: application/json" doesn't apply to folks using the graphql-upload protocol, since that uses POSTs with content-type: multipart/form-data (which has special impact on CORS calculation in a way that application/json doesn't). So our docs should probably be updated to note that users of graphql-upload should do the same thing as GET users and add a header like apollo-require-preflight: true.

(I'm not sure that the error can appear with AS2 as the CSRF prevention feature was only added to AS3.)

[glasser]

(Before making that docs change though I'd love to hear that you got it to work successfully!)

[ronald-truepill]

@glasser That worked! I added this in my useMutation (I'm using React)

  const [uploadDocument] = useMutation(UPLOAD_DOCUMENT, {
    context: {
      headers: {
        'apollo-require-preflight': true,
      },
    },
    onCompleted: () => {
      // ...
    },
    onError: (error) => {
      // ...
    },
  })

Not sure if there's a better way to do it from apollo-upload-client link.

Thank you for your help! Indeed would be great if that's added to the documentation because I searched everywhere about this and didn't find anything

[glasser]

It looks like you can add headers to createUploadLink rather than sending it on each useMutation call.

[trevor-scheer]

@glasser is there anything left to do here / did you want to leave this issue open? Going to close since I think the answer is no, just reopen if I'm wrong.

[glasser]

@ronald-truepill Thanks for the report. Sorry for going radio silence — this was the inspiration for GHSA-2p3c-p3qw-69r4