Why helmet blocks apollo api

Question

Could u please tell me why helmet blocks apollo api at localhost:4000/api? When i comment helmet it works fine as before.

It appears that you might be offline. POST to this endpoint to query your graph:

curl --request POST
--header 'content-type: application/json'
--url ''
--data '{"query":"query { __typename }"}'

const { ApolloServer } = require ('apollo-server-express');
const { ApolloServerPluginDrainHttpServer } = require  ('apollo-server-core');
const express= require ('express');
const http = require ('http');
const models = require('./models')
require ('dotenv').config();
const db = require('./db')
const DB_HOST = process.env.DB_HOST
const typeDefs = require('./schema')
const resolvers = require('./resolvers/index')
const jwt = require('jsonwebtoken');
const cors = require('cors')
const helmet = require('helmet')

db.connect(DB_HOST);


// get the user info from a JWT
const getUser = token => {
  if (token) {
    try {
      // return the user information from the token
      //console.log(jwt.verify(token, process.env.JWT_SECRET))
      return jwt.verify(token, process.env.JWT_SECRET);
    } catch (err) {
      // if there's a problem with the token, throw an error
      throw new Error('Session invalid');
    }
  }
};


async function startApolloServer(typeDefs, resolvers) {
  
  const app = express();
  app.use(cors())
  //app.use(helmet())
  const httpServer = http.createServer(app);

  const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: ({ req }) => {
      // get the user token from the headers
      const token = req.headers.authorization;
      // try to retrieve a user with the token
      const user = getUser(token);
      // for now, let's log the user to the console:
      //console.log(user);
      // add the db models and the user to the context
      return { models, user };
    },
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  });

  await server.start();
  server.applyMiddleware({ app,path: '/api' });
  await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve));
  console.log(`🚀 Apollo Server ready at http://localhost:4000${server.graphqlPath}`);
  
  app.get('/', function (req, res) {
    res.send('Welcome in note app.')
  })
}

startApolloServer(typeDefs, resolvers)

Answer 1

To elaborate on @Kraken answer, that's what you would want to do:

  const isDevelopment = appConfig.env === 'development'

  app.use(
    helmet({
      crossOriginEmbedderPolicy: !isDevelopment,
      contentSecurityPolicy: !isDevelopment,
    }),
  )

Answer 2

app.use(helmet());

is an alias for the following:

app.use(helmet.contentSecurityPolicy());
app.use(helmet.crossOriginEmbedderPolicy());
app.use(helmet.crossOriginOpenerPolicy());
app.use(helmet.crossOriginResourcePolicy());
app.use(helmet.dnsPrefetchControl());
app.use(helmet.expectCt());
app.use(helmet.frameguard());
app.use(helmet.hidePoweredBy());
app.use(helmet.hsts());
app.use(helmet.ieNoOpen());
app.use(helmet.noSniff());
app.use(helmet.originAgentCluster());
app.use(helmet.permittedCrossDomainPolicies());
app.use(helmet.referrerPolicy());
app.use(helmet.xssFilter());

I had the same problem, so I swapped out the alias for adding each one individually. When I commented out the first two (contentSecurityPolicy & crossOriginEmbedderPolicy), Apollo came back to life.

For the record, commenting out these policies is not recommended for production, but it should unblock anyone who gets stuck here.