This operation has been blocked as a potential Cross-Site Request Forgery (CSRF)

Help
1

Good evening. Help me please. An error occurred while using apollo server:

“message”: “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”,

However, using the apollo sandbox shell, there is no such error. If you make a request directly from the browser, then nothing helps.

Code:

const app = express();
const httpServer = http.createServer(app);

const server = new ApolloServer({
  typeDefs: [customTypDefs, scalarTypeDefs],
  resolvers: [customResolvers, scalarResolvers],
  plugins: [
    ApolloServerPluginLandingPageDisabled(),
    ApolloServerPluginDrainHttpServer({ httpServer }),
  ],
});
await server.start();

app.use(
  '/api/graphql',
  cors(),
  bodyParser.json(),
  expressMiddleware(server, {
    context: async ({ req }) => {
      {
        const token = req.headers.authorization;
        const user = getUser(token);
        return { models, user };
      }
    },
  })
);

await new Promise((res) => httpServer.listen({ port: PORT }, res));

console.log(`🚀 Server ready at http://localhost:${PORT}/api/graphql`);
2

Have you read the docs at Configuring CORS - Apollo GraphQL Docs ?

What kind of request you making? CSRF prevention typically only kicks in on GET requests with GraphQL (because GraphQL POST requests generally provide content-type: application/json).

3

Yes, I have already read the documentation up and down and nothing helps. I use a bunch: graphql + mongoose.

notes: async (parent, args, { models }) => await models.Note.find(),

newNote: async (parent, args, { models, user }) => {
    if (!user) throw new GraphQLError('You must be signed in to create a note');
    return await models.Note.create({
      content: args.content,
      author: mongoose.Types.ObjectId(user.id),
    });
  },

The most annoying thing is that literally 2 days ago everything worked fine, the problems started yesterday.

4

I’m asking about how your client is set up. This has nothing to do with your resolvers and everything to do with how your client sends the message: is it GET or POST, what HTTP headers are sent, etc.

1 Like
5

That’s the problem, that I don’t have a client part at all, only a bare server. I made requests through the built-in apollo sandbox shell: I just typed in localhost:4000/api in the browser and tested it. Now it doesn’t work through the browser - it writes such an error, but if you register on studio apollo and add an endpoint there - everything works.

6

I found what the problem is, thanks for not directly, but indirectly helping to figure it out. Good luck and have a nice day.

7

Hi Ronalli,

What was the fix? We’re getting this also!

8

Hi, Royt.

I had the “helmet” library installed, which added headers to an express application. And removed the ApolloServerPluginLandingPageDisabled plugin when creating the server.

9

ok Thank you! I’ll check all my packages!

1 Like