Express: GraphiQL doesn't work with Helmet middleware

[Fowindev]

Hello,

I'm using "apollo-server-express": "^2.18.2" and helmet middleware.
Apollo GraphiQL scripts won't load when helmet is loaded.

Expected behavior:
Load correctly

Actual behavior:
Infinite loading

To reproduce:

• Make an express project
• Use helmet middleware and apollo-server-express middleware
• Go to localhost:PORT/graphql

Thank you.

[Fowindev]

Disabling Helmet option Content-Security-Policy make it work.

[a-tokyo]

Instead of fully disabling Content Security Policy completely, you can use this workaround for now:

This uses the default helmet's CSP and adds only the policies needed to make graphiql work

app.use(
  helmet({
    /**
     * Default helmet policy + own customizations - graphiql support
     * https://helmetjs.github.io/
     */
    contentSecurityPolicy: {
      directives: {
        defaultSrc: [
          "'self'",
          /** @by-us - adds graphiql support over helmet's default CSP */
          "'unsafe-inline'",
        ],
        baseUri: ["'self'"],
        blockAllMixedContent: [],
        fontSrc: ["'self'", 'https:', 'data:'],
        frameAncestors: ["'self'"],
        imgSrc: ["'self'", 'data:'],
        objectSrc: ["'none'"],
        scriptSrc: [
          "'self'",
          /** @by-us - adds graphiql support over helmet's default CSP */
          "'unsafe-inline'",
          /** @by-us - adds graphiql support over helmet's default CSP */
          "'unsafe-eval'",
        ],
        upgradeInsecureRequests: [],
      },
    },
  }),
);

[tlenex]

@a-tokyo using unsafe directives is unsafe and should not be recommended to anyone.
The fix should be applied on GraphiQL/Front-End part of apollo server resolving all issues that CSP reports.

[glasser]

GraphiQL has not been part of apollo-server since Apollo Server 2 shipped in 2018.