blocked as a potential Cross-Site Request Forgery (CSRF)

[rpateld]

How to fix this, while uploading files, do you have a working example?
"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\n"

[glasser]

Have you read the docs about the CSRF prevention feature, including the specific section about graphql-upload? https://www.apollographql.com/docs/apollo-server/security/cors/#preventing-cross-site-request-forgery-csrf

[rpateld]

I'm trying to understand this topic but the documentation is too confusing for me. I need a simple example to follow along. This is the code I wrote but it's not working as expected. Can you please take a look and tell me what I'm doing wrong? I'm really stuck and frustrated. Thanks for your help.

import { createWriteStream, unlink } from "fs";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";
import express from "express";
import pkg from "body-parser";
import cors from "cors";
import mkdirp from "mkdirp";
import shortid from "shortid";
import { schema } from "./schema.js";
import dotenv from "dotenv";
dotenv.config();
const app = express();
const { json } = pkg;

const UPLOAD_DIR = "./uploads";
// Ensure upload directory exists.
mkdirp.sync(UPLOAD_DIR);

/**
 * Stores a GraphQL file upload. The file is stored in the filesystem and its
 * metadata is recorded.
 * @param {GraphQLUpload} upload GraphQL file upload.
 * @returns {object} File metadata.
 */

const storeUpload = async (upload) => {
  console.log("####upload###");
  const { createReadStream, filename, mimetype } = await upload;
  const stream = createReadStream();
  const id = shortid.generate();
  const path = `${UPLOAD_DIR}/${id}-${filename}`;
  const file = { id, filename, mimetype, path };

  await new Promise((resolve, reject) => {
    stream
      .on("error", (error) => {
        unlink(path, () => {
          reject(error);
        });
      })
      .pipe(createWriteStream(path))
      .on("error", reject)
      .on("finish", resolve);
  });
  return file;
};

const server = new ApolloServer({
  csrfPrevention: false,
  schema,
  context: { storeUpload },
});

await server.start();

const PORT = 5031;

app.use("/graphql", cors(), json(), expressMiddleware(server));

app.listen(PORT, () => {
  console.log(`File Server listening on port ${PORT}/graphql`);
});

[glasser]

The change you need to make is in your client. The protocol designed for graphql uploads contains a severe vulnerability for any server that uses cookies to authenticate, unless both the server and client work together to avoid the security issue. (This vulnerability will allow any website on the internet to get browsers to run mutations against your server with the visitor's cookies, even if your server tries to use CORS to restrict your API's usage to trusted servers.)

Apollo Server works by default to prevent this problem; you need to configure your client to work with it. What package are you using to implement GraphQL uploads on the client side?

(You should not add csrfPrevention: false to your server unless you are 100% positive you understand the CSRF threat model intimately and your server is not vulnerable to it.)

[rpateld]

For mutation, I am using GraphQLUpload here is the code, I am using Graphaql Playground to test my upload for my client.

import { GraphQLList, GraphQLObjectType, GraphQLNonNull } from "graphql";
import GraphQLUpload from "graphql-upload/GraphQLUpload.mjs";
import { FileType } from "./File.js";

export const MutationType = new GraphQLObjectType({
  name: "Mutation",
  fields: () => ({
    singleUpload: {
      description: "Stores a single file.",
      type: new GraphQLNonNull(FileType),
      args: {
        file: {
          description: "File to store.",
          type: new GraphQLNonNull(GraphQLUpload),
        },
      },
      resolve: (parent, { file }, { storeUpload }) => storeUpload(file),
    },
    multipleUpload: {
      description: "Stores multiple files.",
      type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(FileType))),
      args: {
        files: {
          description: "Files to store.",
          type: new GraphQLNonNull(new GraphQLList(new GraphQLNonNull(GraphQLUpload))),
        },
      },
      async resolve(parent, { files }, { storeUpload }) {
        const uploadedFiles = [];

        for (const file of files) {
          try {
            const uploadedFile = await storeUpload(file);
            uploadedFiles.push(uploadedFile);
          } catch (error) {
            console.error(`${error.name}: ${error.message}`);
          }
        }

        return uploadedFiles;
      },
    },
  }),
});

[glasser]

That's server code still. I don't know if graphql-playground can be adapted to use the better protocol (last I checked the project had been explicitly unmaintained for years).

[rpateld]

Sorry, I am using Introspection and not graphql-playground.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.